Relatively positioned, z-index:auto non-floated elements are painted in document order in all major Windows browsers including IE 8 beta 1

Minimal test case

This is the first div.

This is a child of the first div.

This is the second div.

In this minimal test case a positioned z-index:auto div has a blue background and a negative bottom margin. This causes another positioned z-index:auto div, with a green background and later in the source, to pull up on top of the first.

Both positioned z-index:auto divs have stacking context–like behaviour, as does the positioned z-index:auto child within the first div. However, no positioned elements have an integer z-index specified and so no actual stacking contexts exist other than that formed by the document root.

An update to CSS 2.1 Candidate Recommendation Section 9.9 (Layered presentation) has been approved, stating that floats (as well as inline blocks, inline tables, and positioned elements whose value of z-index is ‘auto’) should be treated as if they form stacking contexts except in that each positioned descendant and descendant which actually creates a new stacking context should be considered part of the parent stacking context. IE 8 beta 1 supports this behaviour..

Since the three relatively positioned elements all have z-index:auto, they should be painted in document order. This is the case in Firefox 2/Win, Firefox 3 beta 5/Win, Opera 9.27/Win, Safari 3.1/Win, IE 6, IE 7 and IE 8 beta 1.

View implementation bugs related to z-index and stacking contexts.

For a discussion of the ambiguities and errors currently present in the CSS 2.1 Candidate Recommendation as regards z-index and painting order, see CSS 2.1 Candidate Recommendation : z-axis layering behaviour, stacking contexts and the z-index property.