forked from w3c/csswg-drafts
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathzindex.src
More file actions
173 lines (155 loc) · 6.76 KB
/
zindex.src
File metadata and controls
173 lines (155 loc) · 6.76 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<!-- $Id: zindex.src,v 2.5 2004-02-09 21:47:47 bbos Exp $ -->
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<TITLE>Elaborate description of Stacking Contexts</TITLE>
</HEAD>
<BODY>
<H1>Elaborate description of Stacking Contexts</H1>
<p>This chapter defines the CSS2.1 painting order in more detail than
described in the rest of the specification.</p>
<h2>Definitions</h2>
<dl>
<dt>Tree Order</dt>
<dd>Preorder depth-first traversal of the <em>rendering</em> tree, in logical
(not visual) order for bidirectional content, after taking into
account properties that move boxes around such as the 'run-in' value
of 'display'.</dd>
<dt>Element</dt>
<dd>In this description, "element" refers to both actual elements and
pseudo-elements. Pseudo-elements and anonymous boxes are treated as
descendants in the appropriate places. For example, an outside list
marker comes before an adjoining ':before' box in the line box, which
comes before the content of the box, and so forth.</dd>
</dl>
<h2>Painting order</h2>
<p>The bottom of the stack is the furthest from the user, the top of the
stack is the nearest to the user:</p>
<pre>
| | | |
| | | | ⇦ ☻
| | | user
z-index: canvas -1 0 1 2
</pre>
<p>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.</p>
<p>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.</p>
<p>The stacking order for an element generating a stacking context (see
the 'z-index' property) is:</p>
<ol>
<li> If the element is a root element:
<ol>
<li> background color of element over the entire canvas.
<li> background image of element, unclipped, painted at the origin
that would be used if it was painted for the root element.
</ol>
<li>If the element is a block, list-item, or other block equivalent:
<ol>
<li> background color of element unless it is the root element.
<li> background image of element unless it is the root element.
<li> border of element.
</ol>
Otherwise, if the element is a block level table:
<ol>
<li> table backgrounds (color then image) unless it is the root element.
<li> column group backgrounds (color then image).
<li> column backgrounds (color then image).
<li> row group backgrounds (color then image).
<li> row backgrounds (color then image).
<li> cell backgrounds (color then image).
<li> all table borders (in tree order for separated borders).
</ol>
<li>Stacking contexts formed by positioned descendants with negative
z-indices (excluding 0) in z-index order (most negative first)
then tree order.
<li>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:
<ol>
<li> background color of element.
<li> background image of element.
<li> border of element.
</ol>
Otherwise, the element is a table:
<ol>
<li> table backgrounds (color then image).
<li> column group backgrounds (color then image).
<li> column backgrounds (color then image).
<li> row group backgrounds (color then image).
<li> row backgrounds (color then image).
<li> cell backgrounds (color then image).
<li> all table borders (in tree order for separated borders).
</ol>
<li>All floating descendants, in tree order. For each one of these,
treat the element as if it created a new stacking context, but any
descendants which actually create a new stacking context should be
considered part of the parent stacking context, not this new one.
<li>First for the element, then for all its in-flow, non-positioned,
block-level descendants in tree order:
<ol>
<li> For each element in each line box of the element, if any, or
if the element is inline-level (note that all elements in line
boxes are forcably inline-level), on a per-line-box basis:
<ol>
<li> Background color of element.
<li> Background image of element.
<li> Border of element.
<li> For inline elements:
<ol>
<li> Underline of element.
<li> Overline of element.
<li> Text of element.
<li> Then all the element's in-flow, non-positioned,
inline-level descendants, including anonymous
inline elements generated for text nodes inside
the element, in tree order:
<ol>
<li> Jump to step 6.1 for this element.
</ol>
<li> Line-through of element.
</ol>
For inline-block and inline-table elements:
<ol>
<li> For each one of these, treat the element as if it
created a new stacking context, but any
descendants which actually create a new stacking
context should be considered part of the parent
stacking context, not this new one.
</ol>
For inline-level replaced elements:
<ol>
<li> The replaced content, atomically.
</ol>
<li> Optionally, the outline of the element (see 9 below).
</ol>
<li> Otherwise, if the element is a block-level replaced element,
then the replaced content, atomically.
<li> Optionally, if the element is block-level, the outline of the
element (see 9 below).
</ol>
<li>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 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.
<li>Stacking contexts formed by positioned descendants with z-indices
greater than or equal to 1 in z-index order (smallest first) then
tree order.
<li>Finally, implementations that do not draw outlines in steps above
must draw outlines from this stacking context at this stage.
</ol>
<h2>Notes</h2>
<p>The background of the root element is only painted once, over the
whole canvas.</p>
<p>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 CSS2.1, the exact result of these
two requirements is UA-defined. CSS3 may define this in more detail.</p>
</BODY>
</HTML>