为什么CSS中"fixed"定位的子元素相对于父元素而非视口定位？

Question

我正在开发一个基于WordPress的主题，其中包含isotope网格，当鼠标悬停在文章上时，应该在浏览器底部以固定位置显示文章标题。我有这个简化的结构：

<div id="main">
    <article class="hubbub">
        //article content
    <h2 class="subtitled">
        //h2 content
    </h2>
    </article>
</div>

通过 jQuery，在 <article> 元素上的悬停应该显示它的子元素 h2.subtitled 。<article> 元素是相对定位的，但通过 isotope 脚本获取绝对定位。而 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>标题。

有人知道如何使其固定并相对于浏览器窗口吗？

谢谢！

- R4ttlesnake

---

fixed定位会将元素固定在视口中，因此您可能有其他脚本或CSS覆盖了固定位置。 - DaniP

是的，我也遇到了同样的问题。尽管有关方面一再保证，“position: fixed”应该是基于视口而非父元素定位我的某个元素。我非常想知道1）为什么会出现这种情况，2）如何解决它。 - BlairHippo

Answer 1

顺便说一下，当我遇到这个问题时，问题原来是一个父级 div 在其CSS中带有 -webkit-transform: translate3d(0, 0, 0)。显然，这是潜在的固定位置子元素混乱的已知来源。

对于我尝试做的事情（将 fixed 打开和关闭作为一种方式将关键导航元素固定在页面顶部随着页面滚动），解决方案是当需要固定元素时将其 append 到页面 body 元素上，并在不需要时将其放回其包装的 div 中。不知道这是否会对 OP 有所帮助，但如果你自己追查此错误，值得研究一下。

- BlairHippo

---

这里有一个概念验证，演示了这个烦恼：http://codepen.io/markdebeer/pen/qrBDm - BlueCaret

天啊，谢谢！这让我疯了...原来是我添加了一个变形...不仅仅是3D，而且我使用了垂直平移Y...移除它并修复了它的表现就像应该的那样。我想知道他们何时会修复这个问题，因为我觉得我以前见过这个问题...只是因为我使用top:50%和translateY(-50%)来垂直居中而很麻烦。 - carinlynchin

我在Chrome 67上也遇到了同样的问题，原因是父元素有一个will-change: transform属性。 - Norman Breau

令人惊讶的是，截至2018年8月，这个问题仍然存在。 - Giannis Dallas

在父级别中包含“strict”也会导致这个问题 :| - REJH

Answer 2

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

因为某种原因，这会导致固定元素相对于父元素而不是文档进行定位。

Codepen示例。

- Alex

Answer 3

如果有其他人遇到了这个问题，而又没有一个transform属性，那么具有blur()的属性值也会导致此问题出现混乱。

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

- MakeThatMoney

Answer 4

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

- Marzieh Bahri

---

最近我一直在与同一个 bug 斗争。drop-shadow 完全改变了其内部固定元素的行为。由于找不到任何解决方案，我不得不放弃它。 - Sharak