Pro HTML5 and CSS3 Design Patterns

CHAPTER 7 ■ POSITIONING MODELS

Stacking Context

Aliases Stacking Order, Stacking Level, Z-index, Layering, Painting Order

Problem You want to control how positioned elements are stacked from front to back.^

Solution CSS provides z-order to control the stacking of elements. Static elements are stacked from
back to front in document order. Positioned elements are stacked from back to front from
smallest to largest z-index with document order breaking ties. Positioned elements with a
negative z-index are placed behind static elements and non-positioned floats. z-index
values don’t have to be contiguous. The default value for z-index is auto.
A positioned element with a numeric z-index creates a local, self-contained, stacking
context, in which all its descendants are rendered—static, float, and positioned. A stacking
context is not created when z-index is set to auto or when z-index is assigned to a non-
positioned element. The following values create stacking contexts: z-index:0, z-index:- 1 ,
and z-index:9999.
Each stacking context is atomic and doesn’t allow ancestors or siblings to be layered in
between its children. Each local stacking context is assigned to an internal stacking level of
0 , and its descendants are stacked relative to it. This is an important point. z-index isn’t
global. It’s relative to the closest positioned ancestor that has been assigned to a numeric z-
index. The root element, , creates the root stacking context.
A stacking context is rendered in layers from back to front as follows:

1. Background color, image, and borders of the stacking context element


2. Descendant positioned elements with a negative z-index


3. Descendant non-positioned block elements


4. Descendant non-positioned floats


5. Descendant non-positioned inline elements


6. Descendant positioned elements with z-index:auto and z-index:0


7. Descendant positioned elements with a positive z-index
   Steps 2, 6, and 7 each recursively render stacking contexts because each positioned element
   with a numeric z-index creates a local stacking context.
   Before a browser renders an element’s content, it renders its box starting with its
   background color, then its background image, and then its borders. A browser then renders
   a box’s contents on top of the box.

Pattern SELECTOR { z-index:±VALUE; position:ABSOLUTE_FIXED_RELATIVE; }^

Location This pattern applies to all elements.

Limitations Firefox 2 incorrectly switches steps 1 and 2, which puts negative child-stacking contexts
behind the background and borders of the parent context! This has been fixed in newer
versions of Firefox.

Example The example shows all seven stacking levels repeated in two stacking contexts. Notice how
stacking levels are relative to each stacking context.

Related to Positioned, Closest Positioned Ancestor, Absolute, Relative, Relative Float