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.