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

css position fixed
R4ttlesnake picture R4ttlesnake · Jan 13, 2014 · Viewed 35.9k times · Source

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!

Answer

BlairHippo picture BlairHippo · Jul 28, 2014

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.

Related questions

Fixed position but relative to container

I am trying to fix a div so it always sticks to the top of the screen, using: position: fixed; top: 0px; right: 0px; However, the div is inside a centered container. When I use position:fixed it fixes the …

Read More
Hide scrollable content behind transparent fixed position divs when scrolling the page?

I have a div called header that is set up with a fixed position. The problem is when I scroll the page the content of the page shows up behind the header (the header is transparent). I know a lot …

Read More
css footer position stick to bottom of browser?

I'm having a problem with my site http://artygirl.co.uk/pixie/about/ I can't seem to get the footer to automatically stick to the bottom of the browser, and show the rest of my background. Is there a solution …

Read More