Why this div is between two other nested divs? z-index related - css

Question

The best way to explain this is via example:
http://jsfiddle.net/e7JjU/
I have a pretty good understanding of z-indexes and the stacking context but I cannot figure out a logical reason div1 (blue) is able to appear between the stacks of red and green. Can someone please explain this?
#div1{
width: 200px;
height: 50px;
background-color: blue;
position: relative;
top: 20px;
left: 15px;
z-index: 1;
}
#div2 {
width: 200px;
height: 50px;
position: relative;
top: -50px;
background-color: red;
}
#inner{
width: 200px;
height: 50px;
position: relative;
top: 40px;
left: 30px;
background-color: green;
z-index: 2;
}
and the HTML...
<div id="div1"></div>
<div id="div2">
<div id="inner"></div>
</div>​
​

Answer 1

Your red div, #div2 doesnt have a z-index. But #div1 and #inner do. If you were to put the z-index on #div2 then the blue div would not appear between the green div and red div.
z-index applies to the parent divs and child divs.
<div id="div1" style="z-index:1"></div>
<div id="div2" style="z-index:2">
<div id="div4" style="z-index:4;"><!--Higher than any of the other divs--></div>
</div>
<div id="div3 style="z-index:3">
<div><!-- any div inside div3 are higher than div1 and div2 but not div4</div>
</div>