css“固定”子元素位置相对于父元素而不是视口，为什么？
我正在开发一个wordpress主题，它有一个同位素网格，在那里，帖子上的悬停应该在浏览器底部显示一个固定位置的标题。我有一个简化的结构：
<div id="main">
<article class="hubbub">
//article content
<h2 class="subtitled">
//h2 content
</h2>
</article>
</div>通过jQuery，<article>上的悬停应该显示其子元素h2.subtitled。<article>是相对位置，但通过同位素脚本得到一个绝对位置。h2.subtitled定位为：
.subtitled {
display: none;
position: fixed;
z-index: 999999999;
bottom: 20px;
left: 0;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 42px;
text-align: center;
color: yellow;
}由于某些原因，h2.subtitle元素被定位为与父<article>元素相关的固定位置，因此是每个<article>的底部。如果我在<h2>之外设置了<article>，那么它被定位为与浏览器相关的固定位置，但是它们需要位于<article>元素的内部，因为无限大的滚动附加了新的<article>元素，它们还应该包含<h2>标题。
有没有人知道，如何使这个位置固定并与浏览器窗口相关？
谢谢!
回答 4
Stack Overflow用户
发布于 2014-07-28 05:31:40
FWIW，当我遇到这个问题时，问题变成了一个父div，它的CSS中包含了-webkit-transform: translate3d(0, 0, 0)。显然，这是已知的在position: fixed的子元素中潜在的伤害来源。
对于我想做的事情(打开或关闭fixed，作为在页面顶部滚动时将关键导航元素粘贴到页面顶部的一种方式)，解决方案是在需要将其保持在适当位置时将其保存到页body元素，并在不正确时将其粘贴到包装器div中。不知道这些是否会对操作有所帮助，但如果您自己正在追踪这个bug，则值得研究。
Stack Overflow用户
发布于 2017-06-29 12:12:39
Stack Overflow用户
发布于 2020-06-03 13:02:00
如果有其他人已经陷入这种混乱，并且没有transform属性，那么包含blur()的正确值也会导致这种混乱。
这对我来说是个痛点。弄清楚这件事浪费了太多时间。:(
https://stackoverflow.com/questions/21091958
复制
相似问题
Rails最佳实践-参数还是多态模型？
Rails模型控制器最佳实践
Rails最佳实践控制器或模型
Rails模型最佳实践
嵌套模型最佳实践- rails
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
