Z-index does not behave as expected with absolute positioning within a fixed position element

Question

I have a situation where I have 2 or more elements of a fixed position on a page that displays one on the other (that is, the upper part of the second adjoins the lower part of the first) without laying the z index of these elements). Inside the first element of a fixed position, there is an absolutely positioned element that is higher than its fixed parent, so it goes beyond that fixed parent.

The problem is that the next element of a fixed position is displayed on top of an absolutely positioned element. I have a higher z-index value set on an absolutely positioned element than on fixed positioned elements, but it is completely ignored.

To clarify the problem, I put together this example:

HTML

<div class="fixed first"> <p>This is a fixed element</p> <p class="abs"> I should be displayed above both fixed position elements </p> </div> <div class="fixed second"> <p>This is a fixed element</p> </div> 

CSS

 .fixed { font-size: 16px; background: #eee; border-bottom: 1px solid #ccc; position: fixed; height: 3em; width: 100%; z-index: 1; } .abs { position: absolute; background: #acc; height: 6em; top: 0; left: 25%; width: 50%; z-index: 2; } .second { top: 3.0625em; } 

Here is a working JSFiddle example:

http://jsfiddle.net/GS4E4/8/

I'm a little deadlocked by this. Does anyone have an explanation of why this is happening and a way around it?

Answer 1

As Pete notes, it all comes down to styling contexts. In this case, both .fixed elements create their own stacking contexts by virtue of position: fixed; . The child of the first .fixed element creates a stack context nested in its parent element. Since it is embedded in the existing stacking context, it can never break out and stack all the above; its z-index is now relative to the parent.

The spectrum is really somewhat useful with details: http://www.w3.org/TR/CSS2/visuren.html#z-index . You can see through the numbered list that the contexts of the child stacks are colored last dead.

So, in your case, your .fixed.first element should have a z-index of 2 for its child element for the stack on top of .fixed.second .

Answer 2

Move .abs outside both divs.

 <div class="fixed first"> <p>This is a fixed element</p> </div> <div class="fixed second"> <p>This is a fixed element</p> </div> <p class="abs"> I should be displayed above both fixed position elements </p> 

See http://jsfiddle.net/GS4E4/9/ The way you have it now .abs is relative to .first, so it will sit higher. At first, but not higher., Your violin interprets correctly.