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

【问题标题】：css "fixed" child element positions relative to parent element not to the viewport, why? [duplicate]css“固定”子元素相对于父元素的位置而不是视口，为什么？ [复制]
【发布时间】：2014-01-13 13:00:14
【问题描述】：

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

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

谢谢！

【问题讨论】：

Position fixed 总是附加与视口相关的元素，因此您可能有另一个脚本或 css 覆盖固定位置
是的，我也遇到了同样的问题。尽管有相反的保证，“位置：固定”是基于父元素而不是视口定位我的元素之一。我非常想知道 1）为什么会发生这种情况，以及 2）我怎样才能让它停止。

标签： css position fixed

【解决方案1】：

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

对于我正在尝试做的事情（打开和关闭 fixed 以在页面滚动时将关键导航元素粘贴到页面顶部），解决方案是将 append 它到页面body 元素，当它需要将其固定到位并将其粘贴回其包装器 div 时，它不是。不知道这是否会对 OP 有所帮助，但如果你自己在追逐这个错误，那么值得研究。

【讨论】：

这是一个概念证明，证明了这种烦恼：codepen.io/markdebeer/pen/qrBDm
我的天啊谢谢...这让我发疯了...结果我确实添加了一个变换...它不仅仅是 3d，但我正在使用翻译 Y...删除它并固定的行为就像它应该做的那样。我想知道他们什么时候会解决这个问题，因为我觉得我在不久前就看到过这个......这只是一种痛苦，因为我使用 top:50% 和 translateY(-50%) 来垂直居中......
在 Chrome 67 上遇到了同样的问题，对我来说这是由具有 will-change: transform 属性的父级引起的。
太棒了，截至 2018 年 8 月问题仍然存在
contain: strict 在父级上也会导致此问题：|

【解决方案2】：

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

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

Codepen example.

【讨论】：

【解决方案3】：

如果有其他人遇到了这种混乱并且没有transform 属性，那么具有blur() 的正确值也会导致这种混乱。

这对我来说是一个痛点。浪费了太多时间来弄清楚这一点。 :(

【讨论】：

【解决方案4】：

就我而言，父元素没有transform 属性，但filter: drop-shadow(...) 导致了同样的问题。删除过滤器解决了这个问题。

【讨论】：

我最近一直在与同样的错误作斗争。 drop-shadow 完全改变了其中固定元素的行为。不得不放弃它，因为我找不到任何解决方案。