问

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

mobiledu2502885053 发布于 2023-02-03 11:43

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


    
        //article content
    
        //h2 content

通过jQuery,悬停在

应该显示其子元素h2.subtitled.

相对位置,但通过同位素脚本获得绝对位置.在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元素定位固定与父

元素相关,因此每个元素的底部

.如果我设置了它的

外部
,它被定位为与浏览器相关的固定,但它们需要在
元素内部,因为无限滚动附加新
元素,它们也应该包含
标题.

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

谢谢!

2 个回答

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

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

Codepen示例。

2023-02-03 11:46 回答

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

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

2023-02-03 11:49 回答

mobiledu2502916457

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签

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

//h2 content

外部,它被定位为与浏览器相关的固定,但它们需要在元素内部,因为无限滚动附加新元素,它们也应该包含标题. 有谁知道,如何使这个位置固定并与浏览器窗口相关？ 谢谢! (adsbygoogle = window.adsbygoogle || []).push({});

标题. 有谁知道,如何使这个位置固定并与浏览器窗口相关？ 谢谢! (adsbygoogle = window.adsbygoogle || []).push({});

外部
,它被定位为与浏览器相关的固定,但它们需要在
元素内部,因为无限滚动附加新
元素,它们也应该包含
标题.

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

谢谢!

标题.

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

谢谢!