Chrome: can't position one absolute div over another when the parent is fixed

Question

I've discovered that I can't position one absolutely positioned div over another in Chrome when the parent of the div I want to be on top is fixed:

<div id="parent">
    <div id="top"></div>
</div>
<div id="bottom"></div>

Here's a JSFiddle demonstrating the problem:

http://jsfiddle.net/SEJhg/

You should see that in Chrome the yellow absolutely positioned div with z-index 10 appears behind the green absolutely positioned div with z-index: 1, because of the fixed position of the parent.

Other browsers like Firefox show the yellow div on top of the green one.

Any suggestions on how to fix this in Chrome? I'm not able to alter the fixed position of the parent.

Thanks!

Answer 1

What you are experiencing is a relatively new behaviour in Chrome, introduced to align desktop browser behaviour with mobile browsers.

When an element has position: fixed; like your #parent, a new stacking context is created for that element, which means that the element and its children is stacked relatively to each other instead of relatively to the window context. Therefore, an element that is not a child of the fixed element (#bottom) cannot be placed "in between" #parent and #top.

Your solution would be to either move the #bottom inside #parent (putting it in the same stacking context), or changing the positioning method of #parent to something else than fixed.

The proposal for this change in Chrome can be found here: http://lists.w3.org/Archives/Public/www-style/2012May/0473.html