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

IE 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.

This bug is still present in IE7, IE8 fixes it in it's standards compliant mode.

Updated 17-04-2009,