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

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

I have fiddled around with this and the conclusion I have come to is that that in chrome the parent and top elements are inseperable. What I tried to come to this conclusion was putting the bottom element above the parent "sandwich" and fiddling with z-indexes. I can make bottom appear above or below the sandwich, but not directly in it.

What did work for me was this:

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

I don't know the context of your page so this may be a useless response for you, but I think that doing this and then adjusting positioning to get the desired result in the x and y axes of the page will be easier than trying to slip the element in the sandwich from outside as you had hoped.

Cthe position only for chrome:

@media screen and (-webkit-min-device-pixel-ratio:0) {  #parent {    position: absolute;  }} 

See http://jsfiddle.net/5fKq6/ in all browsers.