Proposed Change 1 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, the root element, floats, inline blocks, inline tables and positioned elements are defined as “painting contexts”, of which the root element and positioned elements with integer ‘z-index’ remain defined as “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 painting contexts and stacking contexts. “Painting 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. “Stacking contexts” are formed only by the root element and positioned elements having a computed value of ‘z-index’ other than ‘auto’. The root element forms the “root stacking context”. A stacking context[§4] 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 painting[§2.1] contexts can contain further stacking painting contexts, and each box apart from the root element belongs to precisely one stacking painting context.

A stacking painting context C is atomic from the point of view of its parent[§2.3] containing stacking painting 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 painting 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 painting context.
  2. Whether the box establishes a local 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 local 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 local stacking context.

Each box belongs to one stacking painting context. Each box positioned dependant in a given stacking context of a given containing painting 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 painting context’s local z-axis. Non-positioned dependants have a stack level of -0.2, -0.5 or -0.8 on the containing painting context’s local z-axis (as described below).[§2.8] The background and borders of the painting context have stack level -∞. Within their containing painting 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 painting 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 painting context consists of the following stacking levels[§2.9] painting layers (from back to front), although layers b, f and g are only relevant to stacking contexts:

  1. 1.[§2.9]a. (stack level = -∞) The background and borders of the element forming the stacking painting 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 painting contexts and stacking contexts. “Painting contexts” are formed by the root element, floats, inline blocks, inline tables, and positioned elements. “Stacking contexts” are formed only by the root element and positioned elements having a computed value of ‘z-index’ other than ‘auto’. 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 painting contexts can contain further painting contexts, and each box apart from the root element belongs to precisely one painting context.

A painting context C is atomic from the point of view of its containing painting 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 painting 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 painting context.
  2. Whether the box establishes a 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 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 stacking context.

Each positioned dependant of a given containing painting 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 painting context’s local z-axis. Non-positioned dependants have a stack level of -0.2, -0.5 or -0.8 on the containing painting context’s local z-axis (as described below). The background and borders of the painting context have stack level -∞. Within their containing painting 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 painting context consists of the following painting layers (from back to front), although layers b, f and g are only relevant to stacking contexts:

  1. a. (stack level = -∞) The background and borders of the element forming the painting 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’.