Z-Indexing with position relative and absolute

A
B
C
D
E
F

Example:1

np.
ap. z = 2
ap. z = 1
ap. z = 0
ap. z = -1
ap. z = -2
ap.
np.

This demo is in draft form and is very unfinished.

To see all the examples correctly, please have the window maximised. Refresh the window in IE if the boxes are to short.

Firefox 2+
Seems to layer the elements correctly so not all the parts of the examples are seen since the elements are layered under the page canvas, so a check in Opera or IE is needed to see the hidden elements.
Opera 9+
If a z-index is given that layers a element under the page canvas then the z-index is ignored. If a z-index is given that layers a element under an ancestor rp element, then the z-index is ignored if the ancestor element also has a z-index other than auto (which creates a local stacking content.
IE7
Apart from doing as Opera does, but because of different reasons, IE7 also creates a local stacking order when an element is given position:relative;. This should only happen if a z-index is also given other than auto.
IE6
Apart from doing as IE7, all the containers in all examples have hasLayout. IE6 behaves differenty to IE7.

example is ok Indicates that Firefox, Opera and IE7 layers the same.

Example:2

rp. no z axis
ap. z = 2
ap. z = 1
ap. z = 0
ap. z = -1
ap. z = -2
ap.
np.

Example:3

rp. no z axis
ap. z = 2
ap. z = 1
ap. z = 0
ap. z = -1
ap. z = -2
ap.
rp. no z axis

Example:4

rp. z = 1
ap. z = 2
ap. z = 1
ap. z = 0
ap. z = -1
ap. z = -2
ap.
rp. no z axis

The above example brings the correct results in layering.

Example:5

rp. no z axis
ap. z = 2
ap. z = 1
ap. z = 0
ap. z = -1
ap. z = -2
ap.
rp. no z axis
ap. z = 2
ap. z = 1
ap. z = 0
ap. z = -1
ap. z = -2
ap.

In Firefox & Opera, hovering examples 5a, 5b & 5c above raises the z-index by one for the ap. green boxes which allows the ap. green boxes to overlap the ap. blue boxes Nothing changes for IE.

Example:6

rp. z = 1
ap. z = 2
ap. z = 1
ap. z = 0
ap. z = -1
ap. z = -2
ap.
rp. no z axis
ap. z = 2
ap. z = 1
ap. z = 0
ap. z = -1
ap. z = -2
ap.

Having a z-index on the first rp. element (orange) raises this element allowing the descendant ap. green boxes to overlap the ap. blue boxes.

Example:7

rp. z = 1
ap. z = 2
ap. z = 1
ap. z = 0
ap. z = -1
ap. z = -2
ap.
rp. z = 0
ap. z = 2
ap. z = 1
ap. z = 0
ap. z = -1
ap. z = -2
ap.

The above example brings the correct results in layering.

Example:8

rp. z = 1
ap. z = 2
ap. z = 1
ap. z = 0
ap. z = -1
ap. z = -2
ap.
rp. z = 1
ap. z = 2
ap. z = 1
ap. z = 0
ap. z = -1
ap. z = -2
ap.

Example:9

rp. no z axis
ap. z = 2
ap. z = 1
ap. z = 0
ap. z = -1
ap. z = -2
ap.
rp. z = 1
ap. z = 2
ap. z = 1
ap. z = 0
ap. z = -1
ap. z = -2
ap.

Example:10

rp. no z axis
ap. z = 2
ap. z = 1
ap. z = 0
ap. z = -1
ap. z = -2
ap.
rp. z = 0
ap. z = 2
ap. z = 1
ap. z = 0
ap. z = -1
ap. z = -2
ap.

Example:11

rp. no z axis
ap. z = 2
ap. z = 1
ap. z = 0
ap. z = -1
ap. z = -2
ap.
rp. z = -1
ap. z = 2
ap. z = 1
ap. z = 0
ap. z = -1
ap. z = -2
ap.

Adjustment of z-index for absolutely positioned element

Hovering over any of the absolutely positioned elements above (green & blue boxes) will increase it's z-index by plus 1. The below list show if the layering is altered for the examples in Firefox or Opera. There will be no change at all with IE7

Other explanations of z-indexing.