css "fixed" child element positions relative to parent element not to the viewport, why?
css, fixed, position
Solution
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.
Problem
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!