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

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

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?