css “fixed” child element positions relative to parent element not to the viewport, why?

问题

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>

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

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?

Thanks!

回答1:

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.

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.

回答2:

Remove the transform property from the parent of the fixed element.

For some reason this causes the fixed element to become relative to the parent instead of the document.

Codepen example.

回答3:

In my case, the parent element doesn't have a transform property but filter: drop-shadow(...) which caused the same problem. Removing the filter solved the problem.

来源：https://stackoverflow.com/questions/21091958/css-fixed-child-element-positions-relative-to-parent-element-not-to-the-viewpo