This chapter defines the CSS 2.1 painting order in more detail than described in the rest of the specification.
The bottom of the stack is the furthest from the user, the top of the stack is the nearest to the user:
| | | | | | | | ⇦ ☻ | | | user z-index: canvas -1 0 1 2
The stacking context background and most negative positioned stacking contexts are at the bottom of the stack, while the most positive positioned stacking contexts are at the top of the stack.
The canvas is transparent if contained within another, and given a UA-defined color if it is not. It is infinite in extent and contains the root element. Initially, the viewport is anchored with its top left corner at the canvas origin.
The painting order for the descendants of an element generating a stacking context (see the 'z-index' property) is:
If the element is a root element:
If the element is a block, list-item, or other block equivalent:
Otherwise, if the element is a block level table:
Stacking contexts formed by positioned descendants with negative z-indices (excluding 0) in z-index order (most negative first) then tree order.
For all its in-flow, non-positioned, block-level descendants in tree order: If the element is a block, list-item, or other block equivalent:
Otherwise, the element is a table:
All non-positioned floating descendants, in tree order. For each one of these, treat the element as if it created a new stacking context, but any positioned descendants and descendants which actually create a new stacking context should be considered part of the parent stacking context, not this new one.
If the element is an inline element that generates a stacking context, then:
For each line box that the element is in:
Otherwise: first for the element, then for all its in-flow, non-positioned, block-level descendants in tree order:
If the element is a block-level replaced element, then: the replaced content, atomically.
Otherwise, for each line box of that element:
For each box that is a child of that element, in that line box, in tree order:
background color of element.
background image of element.
border of element.
For inline elements:
For all the element's in-flow, non-positioned, inline-level children that are in this line box, and all runs of text inside the element that is on this line box, in tree order:
If this is a run of text, then:
Otherwise, jump to 7.2.1 for that element.
For inline-block and inline-table elements:
For inline-level replaced elements:
Some of the boxes may have been generated by line splitting or the Unicode bidirectional algorithm.
Optionally, the outline of the element (see 10 below).
Optionally, if the element is block-level, the outline of the element (see 10 below).
All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order. For those with 'z-index: auto', treat the element as if it created a new stacking context, but any positioned descendants and descendants which actually create a new stacking context should be considered part of the parent stacking context, not this new one. For those with 'z-index: 0', treat the stacking context generated atomically.
Stacking contexts formed by positioned descendants with z-indices greater than or equal to 1 in z-index order (smallest first) then tree order.
Finally, implementations that do not draw outlines in steps above must draw outlines from this stacking context at this stage. (It is recommended to draw outlines in this step and not in the steps above.)
The background of the root element is only painted once, over the whole canvas.
While the backgrounds of bidirectional inlines are painted in tree order, they are positioned in visual order. Since the positioning of inline backgrounds is unspecified in CSS 2.1, the exact result of these two requirements is UA-defined. CSS3 may define this in more detail.