A

B

C

D

E

F

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.

Indicates that Firefox, Opera and IE7 layers the same.

rp. no z axis

ap. z = 2

ap. z = 1

ap. z = 0

ap. z = -1

ap. z = -2

ap.

np.

rp. no z axis

ap. z = 2

ap. z = 1

ap. z = 0

ap. z = -1

ap. z = -2

ap.

rp. no z axis

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.

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.

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.

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.

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.

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.

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.

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.

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

- example 3c
- example 4d (in FF only)
- example 5a, 5b & 5c (green boxes)
- example 6c (blue box)& 6d (green box in FF only)
- example 7d (green and blue boxes in FF only)
- example 8d (green and blue boxes in FF only)
- example 9b (green box) & 9d (blue box in FF only)
- example 10c (green box) & 10d (blue box in FF only)

Other explanations of z-indexing.

- OverlappingAndZIndex
- W3C-CSS2.1 9.9 Layered presentation
- Effect of z-index value to positioned elements
- IE/Win problems with absolute positioning inside a relative element
- http://www.brunildo.org/test/ap_contbox1.html
- Find out how elements stack and start using low z-index values with interactive tool.