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>元素内，因为无限滚动会附加新{ {1}}元素，它们也应包含<article>个标题。

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

谢谢！

Answer 1

FWIW，当我遇到这个问题时，问题原来是在其CSS中div的父-webkit-transform: translate3d(0, 0, 0)。显然，这是使用position: fixed的儿童元素潜在混乱的已知来源。

对于我想要做的事情（打开和关闭fixed作为在滚动时将关键导航元素粘贴到页面顶部的方式），解决方案是append它是指页面body元素的时候将它固定到位并在它不包装时将其粘贴在包装div中。不知道这是否有助于OP，但如果你自己追逐这个bug，值得研究。

Answer 2

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

由于某种原因，这会导致fixed元素相对于父元素而不是文档。

Codepen example.

Answer 3

万一有其他人遇到了这种混乱，并且没有transform属性，则具有blur()的适当值也会导致混乱。

这对我来说真是一个痛点。弄清楚这个问题浪费了太多时间。：（

Answer 4

在我的情况下，父元素没有transform属性，但是filter: drop-shadow(...)导致了同样的问题。卸下过滤器即可解决问题。

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

4 个答案: