CSS“固定”子元素相对于父元素而不是视口的位置,为什么?

我正在开发一个带有同位素网格的wordpress主题,并且帖子上的悬停应该在浏览器底部的固定位置显示其标题。 我有这个简化的结构:

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

通过jQuery,将鼠标悬停在h2.subtitle上应显示其子元素<article><article>相对放置,但通过同位素脚本获得绝对位置。 29900892295497000700099的固定位置为:

.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;
}

由于某些原因,29900892295497000700096元素的位置与父级29900892295497000700097元素相关,因此固定在每个<article>的底部。如果将299008922954970007000设置在<article>之外,则其位置与浏览器相关,但它们必须位于浏览器内部 <article>元素中的元素,因为无限滚动会附加新的2990089229549700700元素,并且它们还应包含<h2>标题。

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

谢谢!

R4ttlesnake asked 2020-07-31T02:02:10Z
3个解决方案
100 votes

FWIW,当我遇到这个问题时,问题出在它的CSS中是父级fixedappend。 显然,这是带有body的子元素中潜在混乱的已知来源。

对于我正在尝试做的事情(打开和关闭fixed作为将关键的导航元素粘贴到页面顶部的方式),解决方案是将append替换为页面body,当时该 将其固定在适当的位置,然后将其粘回包装器div中。 不知道这是否会对OP有所帮助,但是如果您自己追捕此bug,值得研究。

BlairHippo answered 2020-07-31T02:02:30Z
6 votes

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

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

Codepen示例。

Alex answered 2020-07-31T02:02:59Z
0 votes

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

Marzieh Bahri answered 2020-07-31T02:03:19Z
translate from https://stackoverflow.com:/questions/21091958/css-fixed-child-element-positions-relative-to-parent-element-not-to-the-viewpo