Stacking Contexts

Although we tend to regard a web page as a two-dimensional entity, boxes are positioned in three dimensions. The third dimension is the z axis, which is perpendicular to the screen.

Positioned elements can overlap, since they can be rendered at the same position. Each box has an associated stack level, which is its position along the z axis, and belongs to a stacking context. A box with a higher stack level is rendered “in front of” a box with a lower stack level; in other words, it’s rendered closer to a user facing the viewport. A stack level can also be negative.

We can specify the stack level via the z-index property. The value auto means the box will have the same stack level as its parent, and implies that the box doesn’t establish a new stacking context. A value that’s provided as an integer specifies an explicit stack level, and causes the box to establish a new local stacking context. The box itself has the stack level 0 in this new context.

A stacking context consists of seven different layers (from bottom to top):

  1. the background and borders of the element that establishes the stacking context
  2. the stacking contexts of descendants with negative stack levels
  3. block-level descendants in the normal flow
  4. floated descendants and their contents
  5. inline-level descendants in the normal flow
  6. positioned descendants whose z-index is auto or 0
  7. the stacking contexts of descendants with positive stack levels

A stacking context is also generated by any positioned element (including relatively positioned elements) whose computed z-index value is anything other than auto.

Boxes within a stacking context can’t occur between two boxes that belong to another stacking context.

User-contributed notes

ID:
#5
Contributed:
by Paul O'B
Date:
Tue, 06 Jul 2010 09:04:20 GMT

@smartdub: No there is n need because all positioned elements get "auto" as the default so you would just be wasting space. It will make no difference to IE7 and under because they don't understand "auto" anyway and will use zero.

ID:
#4
Contributed:
by smartdub
Date:
Wed, 03 Mar 2010 17:04:48 GMT

After reading this, it sounds like a good idea to set a "z-index:auto;" to all the new HTML5 element in a dedicated Reset/Base CSS file.

ID:
#2
Contributed:
by thierry koblentz
Date:
Fri, 21 Mar 2008 03:20:25 GMT

Positioning an element without explicit z-index value creates a new stacking context in Internet Explorer.

Related Products