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

问题

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!

回答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

回答2:

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.

回答3:

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.

回答4:

Try this code:

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

</div>

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

回答5:

I am using Chrome version: 21.0.1180.89 m and the yellow is positioned above the green.

来源：https://stackoverflow.com/questions/13798669/chrome-cant-position-one-absolute-div-over-another-when-the-parent-is-fixed

标签

html

css

google-chrome

z-index