Proposed Change 2 to CSS 2.1 Candidate Recommendation, Section 9.9 (Layered presentation)

Author: Anton Prowse
Created: 2007-10-22
Published: 2008-05-04
Last modified: 2008-06-05
changelog

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.

Abstract

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.

Contents

  1. Abstract
  2. Contents
  3. Summary
  4. Conventions
  5. Annotated proposal
  6. Unannotated proposal

Summary

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”.

Conventions

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.

Annotated proposal

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 stacking painting contexts may not come between any of its boxes.[§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.

‘z-index’
Value:  auto | <integer> | inherit
Initial:  auto
Applies to:  positioned elements
Inherited:  no
Percentages:  N/A
Media:  visual
Computed value:  as specified

For a positioned box, the ‘z-index’ property specifies:

  1. The stack level of the box in the current stacking context.
  2. Whether the box establishes a locala strong stacking context.

Values have the following meanings:

<integer>
This integer is the stack level of the generated box in the current stacking context. The box also establishes a locala strong stacking context in which its stack level is ‘0’[§2.7].
auto
The stack level of the generated box in the current[§2.3] containing stacking context is the same as its parent’s box[§2.8] 0 if the box is positioned, and not defined by the ‘z-index’ property otherwise. The box does not establish a new locala strong stacking context.

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):

  1. 1.[§2.9]a. (stack level = -∞) The background and borders of the element forming the stacking context.
  2. 2.b. (stack level = z-index) The stacking contexts of positioned descendants[§2.4] dependants with negative stack levels.
  3. 3.c. (stack level = -0.8) A stacking level painting layer containing (the backgrounds and borders of) in-flow non-positioned non--inline-level block-level descendants dependant boxes (but not block-level replaced content).
  4. 4.d. (stack level = -0.5) A stacking level painting layer for non-positioned[§2.10] dependant floats and their contents.[§2.10]
  5. 5.e. (stack level = -0.2) A stacking level painting layer for block-level replaced content and in-flow inline-level descendants dependants.
  6. 6.f. (stack level = 0) A stacking level painting layer for positioned descendants dependants with ‘z-index: auto’, and for any descendant positioned dependant stacking contexts with ‘z-index: 0’.
  7. 7.g. (stack level = z-index) The stacking contexts of descendants dependants with positive stack levels.

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.

Unannotated proposal

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.

‘z-index’
Value:  auto | <integer> | inherit
Initial:  auto
Applies to:  positioned elements
Inherited:  no
Percentages:  N/A
Media:  visual
Computed value:  as specified

For a positioned box, the ‘z-index’ property specifies:

  1. The stack level of the box in the current stacking context.
  2. Whether the box establishes a strong stacking context.

Values have the following meanings:

<integer>
This integer is the stack level of the generated box in the current stacking context. The box establishes a strong stacking context.
auto
The stack level of the generated box in the containing stacking context is 0 if the box is positioned, and not defined by the ‘z-index’ property otherwise. The box does not establish a strong stacking context.

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):

  1. a. (stack level = -∞) The background and borders of the element forming the stacking context.
  2. b. (stack level = z-index) The stacking contexts of positioned dependants with negative stack levels.
  3. c. (stack level = -0.8) A painting layer containing (the backgrounds and borders of) in-flow non-positioned block-level dependant boxes (but not block-level replaced content).
  4. d. (stack level = -0.5) A painting layer for non-positioned dependant floats.
  5. e. (stack level = -0.2) A painting layer for block-level replaced content and in-flow inline-level dependants.
  6. f. (stack level = 0) A painting layer for positioned dependants with ‘z-index: auto’, and for any positioned dependant stacking contexts with ‘z-index: 0’.
  7. g. (stack level = z-index) The stacking contexts of dependants with positive stack levels.

For a more thorough explanation of the stacking order, please see Appendix E.

Changelog

  1. 2008-06-05: Cross-referenced the corrections regarding the stacking level for floats to the parent paper.
  2. 2008-08-10: Clarified the description of painting layer b to contain the word ‘positioned’.