This box should be on top and is with Firefox.
This box should not be on top; IE6 however seems to create a new stacking context for positioned elements, even when the computed z-index of that element is 'auto'.

IE6 z-index bug

To the right are 2 boxes that are absolutely positioned; the lime-green box has a z-index value of 10 and the yellow box has a z-index of 20. The only difference between the boxes is that the yellow box is wrapped in a division that has position:relative and is the first box defined in the sourcecode.

Basically the fact that the yellow box is wrapped in a relative positioned element should not effect the stacking order: the CSS specification clearly states that only positioned elements that have a computed z-index value other than 'auto' generate a new stacking context. The relative positioned element does not have a z-index value defined, so it should not influence the stacking order of it's child-elements.

It appears that in Internet Explorer (windows) positioned elements do generate a new stacking context, starting with a z-index value of 0, causing the lime-green box to appear above the yellow box.

This is a serious violation of the CSS specifications, causing headages and a lot of misunderstanding of what z-index really does.

From (without text edit): http://therealcrisp.xs4all.nl/ie7beta/css_zindex.html

    While trying to solve the submenu problem on my Home Page, I found this code. Apparently it was intended to demonstrate a z-index bug in IE6 and earlier. However, there is a flaw in the above code, and when corrected, does not reveal a bug in IE6. The "Where's the Bug?" page describes and fixes the flaw.