Note that in this document, discussion of the CSS 2.1 Candidate Recommendation is made in reference to the latest revision (2007-07-19) at the time of writing.
A proposal is presented for the replacement of CSS 2.1 Candidate Recommendation, Section 9.9 (Layered presentation). This proposal addresses the flaws in the specification which are raised in a parent paper.
This proposal attempts to preserve as much as possible of the exposition found in CSS 2.1 CR, Section 9.9, although some existing phrases are relocated when it is believed that this improves the exposition. A number of additions and corrections are made to address the problems with the exposition as discussed in the parent paper. All of these problems are resolved in this proposal. In particular, floats, inline blocks and inline tables are included in the definition of “stacking context”, while the root element and positioned elements with integer ‘z-index’ are distinguished as “strong stacking contexts”.
Phrases which do not appear in CSS 2.1 CR, Section 9.9 have a pink background. Where these phrases are based on information stated elsewhere in CSS 2.1 CR, the origin of this information is indicated. Phrases which have been added for clarification of the existing specification are coloured green. Phrases which correct errors in the existing specification are coloured red. Phrases which appear in CSS 2.1 CR, Section 9.9 but which have been moved are delimited with arrows; they have a green background in their new location and are crossed through in their old location. Phrases which are proposed for deletion are crossed through; where a reason for deletion is given this is indicated. Cross references are provided to sections of the parent paper.
In this section, the expression “in front of” means closer to the user as the user faces the screen.
In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a “z-axis” and[§2.5] are formatted one on top of the other. Z-axis positions are This is particularly relevant when boxes overlap visually. This section discusses how boxes may be positioned along the z-axis in this third dimension, relative to each other.
The order in which the rendering tree is painted onto the canvas is described in terms of stacking contexts. “Stacking contexts” are formed by the root element, floats, inline blocks, inline tables, positioned elements whose value of ‘z-index’ is ‘auto’, and positioned elements having a computed value of ‘z-index’ other than ‘auto’.[§2.1] and positioned elements. “Strong stacking contexts” are formed only by the latter elements (having integer ‘z-index’) and the root element.[§2.1] The root element forms the “root stacking context”. A strong stacking context[§4] A positioned element participates in the closest ancestor stacking context, while all other boxes participate in the closest ancestor painting context.[§2.2] In either case, the participants are called the “dependants”[§2.4] of their closest such ancestor (the “containing painting context”)[§2.3]. Hence stacking contexts can contain further stacking contexts, and each box apart from the root element belongs to precisely one stacking context.
A stacking context C is atomic from the point of view of its parent[§2.3] containing stacking context; boxes in other [§2.6], which has no view of C’s own dependants as individuals and hence may not insert any other dependent box between C’s own dependant boxes, nor between C’s background and C’s own dependant boxes. In this section, the general term ‘box’ is taken to include these atomically-viewed stacking contexts.stacking painting contexts may not come between any of its boxes.
For a positioned box, the ‘z-index’ property specifies:
Values have the following meanings:
Each box belongs to one stacking context. Each box positioned dependant in a given stacking context of a given containing stacking context has an integer stack level – equal to its value of ‘z-index’, or 0 for ‘z-index: auto’ – which is its position on the z-axis relative to other boxes in the same stacking context the containing stacking context’s local z-axis. Non-positioned dependants have a stack level of -0.2, -0.5 or -0.8 on the containing stacking context’s local z-axis (as described below).[§2.8] The background and borders of the stacking context have stack level -∞. Within their containing stacking context, Boxes dependants with greater stack levels are always formatted in front of boxes dependants with lower stack levels.; Boxes may have negative stack levels. Boxes dependants with the same stack level in a stacking context are stacked back-to-front 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’.
Each stacking context consists of the following stacking levels[§2.9] painting layers (from back to front):
For a more thorough explanation of the stacking order, please see Appendix E.
The contents of inline blocks and inline tables are stacked as if they generated new stacking contexts, except that any elements that actually create new stacking contexts take part in the parent foster stacking context.They are then painted atomically in the inline stacking level painting layer.
In this section, the expression “in front of” means closer to the user as the user faces the screen.
In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes are formatted one on top of the other. This is particularly relevant when boxes overlap visually. This section discusses how boxes may be positioned in this third dimension, relative to each other.
The order in which the rendering tree is painted onto the canvas is described in terms of stacking contexts. “Stacking contexts” are formed by the root element, floats, inline blocks, inline tables, and positioned elements. “Strong stacking contexts” are formed only by the latter elements (having integer ‘z-index’) and the root element. A positioned element participates in the closest ancestor stacking context, while all other boxes participate in the closest ancestor painting context. In either case, the participants are called the “dependants” of their closest such ancestor (the “containing painting context”). Hence stacking contexts can contain further stacking contexts, and each box apart from the root element belongs to precisely one stacking context.
A stacking context C is atomic from the point of view of its containing stacking context, which has no view of C’s own dependants as individuals and hence may not insert any other dependent box between C’s own dependant boxes, nor between C’s background and C’s own dependant boxes. In this section, the general term ‘box’ is taken to include these atomically-viewed stacking contexts.
For a positioned box, the ‘z-index’ property specifies:
Values have the following meanings:
Each positioned dependant of a given containing stacking context has an integer stack level – equal to its value of ‘z-index’, or 0 for ‘z-index: auto’ – which is its position on the containing stacking context’s local z-axis. Non-positioned dependants have a stack level of -0.2, -0.5 or -0.8 on the containing stacking context’s local z-axis (as described below). The background and borders of the stacking context have stack level -∞. Within their containing stacking context, dependants with greater stack levels are always formatted in front of dependants with lower stack levels; dependants with the same stack level are stacked back-to-front according to document tree order.
Each stacking context consists of the following painting layers (from back to front):
For a more thorough explanation of the stacking order, please see Appendix E.