W3C CSS2 Cascading Style Sheets, level 2 - instructional media + ...

Document Window
I used two red hyphens to serve
as a change bar. They will "float"
to the left of the line containing
−−THIS word.
First, the paragraph (whose containing block sides are shown in the illustration)
is flowed normally. Then it is offset ’10px’ from the left edge of the containing
block (thus, a right margin of ’10px’ has been reserved in anticipation of the
offset). The two hyphens acting as change bars are taken out of the flow and
positioned at the current line (due to ’top: auto’), ’-1em’ from the left edge of its
containing block (established by the P in its final position). The result is that the
change bars seem to "float" to the left of the current line.
9.9 Layered presentation
In the following sections, the expression "in front of" means closer to the user as
the user faces the screen.
In CSS2, each box has a position in three dimensions. In addition to their horizontal
and vertical positions, boxes lie along a "z-axis" and are formatted one on
top of the other. Z-axis positions are particularly relevant when boxes overlap
visually. This section discusses how boxes may be positioned along the z-axis.
Each box belongs to one stacking context. Each box in a given stacking
context has an integer stack level, which is its position on the z-axis relative to
other boxes in the same stacking context. Boxes with greater stack levels are
always formatted in front of boxes with lower stack levels. Boxes may have negative
stack levels. Boxes with the same stack level in a stacking context are
stacked bottom-to-top according to document tree order.
The root [p. 30] element creates a root stacking context, but other elements
may establish local stacking contexts. Stacking contexts are inherited. A local
stacking context is atomic; boxes in other stacking contexts may not come
between any of its boxes.
An element that establishes a local stacking context generates a box that has
two stack levels: one for the stacking context it creates (always ’0’) and one for
the stacking context to which it belongs (given by the ’z-index’ property).
An element’s box has the same stack level as its parent’s box unless given a
different stack level with the ’z-index’ property.
125