css"固定"子元素相对于父元素的位置而不是视口,为什么？

Question

我正在开发一个带有同位素网格的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>标题.

有谁知道,如何使这个位置固定并与浏览器窗口相关？

谢谢!

Answer 1

FWIW,当我跑成这样,这个问题竟然是父母div与-webkit-transform: translate3d(0, 0, 0)在CSS.显然,这是儿童元素潜在混乱的已知来源position: fixed.

对于我试图做的事情(打开fixed和关闭作为一种方法,在滚动时将一个关键的导航元素粘贴到页面的顶部),解决方案是当它是时候把它保持在append页面body元素div当它没有时,把它放回包装里.不知道这是否有助于OP,但如果你自己追逐这个bug,值得研究.

Answer 2

transform从固定元素的父项中删除该属性。

由于某些原因，这导致固定元素变得相对于父元素而不是相对于文档。

Codepen示例。

Answer 3

如果还有其他人遇到这种混乱并且没有财产transform，那么财产的价值blur()也会导致这种混乱。

这对我来说是一个痛点。解决这个问题浪费了太多时间。:(