Glossary and Background to following demo

Position: relative; Stack Contexts, Stack Levels and HasLayout ~ what's happening between them

Note: all references to IE7 throughout this article, refer to The IE7 Beta 2 Preview, I will update this info as necessary


General References

[00] CSS2.1 reference for z-index : z-index -with some highlighted quotes

The stack level of the generated box in the current stacking context is the same as its parent's box. The box does not establish a new local stacking context.

Each box belongs to one stacking context. Each box in a given stacking context has an integer stack level, which is its position on the z-axis relative to other boxes in the same stacking context. Boxes with greater stack levels are always formatted in front of boxes with lower stack levels. Boxes may have negative stack levels. Boxes with the same stack level in a stacking context are stacked bottom-to-top according to document tree order.

The root element forms the root stacking context. Other stacking contexts are generated by any positioned element (including relatively positioned elements) having a computed value of 'z-index' other than 'auto'. Stacking contexts are not necessarily related to containing blocks. In future levels of CSS, other properties may introduce stacking contexts

[01] Each stacking context consists of the following stacking levels (from back to front):

  1. the background and borders of the element forming the stacking context.
  2. the stacking contexts of descendants with negative stack levels.
  3. a stacking level containing in-flow non-inline-level descendants.
  4. a stacking level for floats and their contents.
  5. a stacking level for in-flow inline-level descendants.
  6. a stacking level for positioned descendants with 'z-index: auto', and any descendant stacking contexts with 'z-index: 0'.
  7. the stacking contexts of descendants with positive stack levels.
Appendix E. Elaborate description of Stacking Contexts - CSS2.1: more on z-index

Credits: used in article

Credits: due along the way

Claire (Suzy) Campbell «» © 2003-2009