Z-index not behaving as expected with absolute positioning inside a fixed position element

Question

I've got a situation where I've got 2 or more fixed position elements on a page displaying stacked one on top of the other (that is, the top of the second one is abutting the bottom of the first one - no z-index stacking of those elements). Inside the first fixed position element, there's an absolutely positioned element which is taller than its fixed parent, so it extends beyond the bottom of that fixed parent.

The trouble is that the next fixed position element gets displayed on top of the absolutely positioned element. I've got a higher z-index value set on the absolutely positioned element than on the fixed positioned elements, but it is ignored completely.

To help clarify the issue, 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's the working example on JSFiddle:

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

I'm kind of stumped by this. Does anyone have an explanation as to why this is happening, and a way to work around it?

Answer 1

As Pete's comment alludes to, it all comes down to stacking contexts. In this case, both .fixed elements create their own stacking contexts by virtue of being position: fixed;. The child of the first .fixed element creates a stacking context nested within its parent. Because it's nested inside an existing stacking context, it can never break out and stack any higher; its z-index is relative to its parent now.

The spec is actually somewhat helpful with the particulars: http://www.w3.org/TR/CSS2/visuren.html#z-index. You can see via the numbered list that child stacking contexts are painted dead last.

So in your case, your .fixed.first element would need to have a z-index of 2 for its child to stack atop .fixed.second.

Answer 2

Move .abs outside of 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 positioned relative to .first so it will sit above .first but not above .second, your fiddle is interpreting correctly.