css“固定"子元素相对于父元素的位置而不是视口的位置，为什么? [英] css "fixed" child element positions relative to parent element not to the viewport, why?

问题描述

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

I'm developing a wordpress theme, with an isotope grid and where a hover on a post should display its title with a fixed position on the bottom of the browser. I have this simplified structure:

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

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

Via jQuery, a hover on <article> should display its child element h2.subtitled. <article> is positioned relative, but gets an absolute position by the isotope script. The h2.subtitled is positioned fixed with:

.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>标题.

For some reason, the h2.subtitle elements get positioned fixed related to the parent <article> element, so an the bottom of each <article>. If I set the <h2> outside of the <article>, it is positioned fixed related to the browser, but they need to be inside of the <article> element, because an infinite scroll appends the new <article> elements and they should as well contain the <h2> titles.

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

Does anyone know, how to make this position fixed and related to the browser window?

谢谢！

推荐答案

FWIW，当我遇到此问题时，问题出在CSS中，而问题出在父级div中，而-webkit-transform: translate3d(0, 0, 0).显然，这是position: fixed的子元素中潜在混乱的已知来源.

FWIW, when I ran into this, the problem turned out to be a parent div with -webkit-transform: translate3d(0, 0, 0) in its CSS. Apparently, this is a known source of potential mayhem in child elements with position: fixed.

对于我想做的事情(打开和关闭fixed作为将关键的nav元素滚动到页面顶部的一种方式)，解决方案是将其append放置到页面上是时候将body元素固定在适当位置，然后将其粘回包装器div中.不知道这是否会对OP有所帮助，但是如果您自己追捕此bug，值得研究.

For what I was trying to do (turning fixed on and off as a way of sticking a key nav element to the top of the page as it scrolled by), the solution was to append it to the page body element when it was time to hold it in place and sticking it back in its wrapper div when it wasn't. No idea if any of this would have helped the OP, but if you're chasing this bug yourself, worth looking into.

这篇关于css“固定"子元素相对于父元素的位置而不是视口的位置，为什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！