-
Notifications
You must be signed in to change notification settings - Fork 790
Expand file tree
/
Copy pathzindex.html
More file actions
307 lines (260 loc) · 9.75 KB
/
zindex.html
File metadata and controls
307 lines (260 loc) · 9.75 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
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<HEAD>
<TITLE>Elaborate description of Stacking Contexts</TITLE>
<link rel="stylesheet" href="style/default.css" type="text/css">
<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/W3C-ED.css" type="text/css">
<link rel="prev" href="sample.html">
<link rel="next" href="propidx.html">
<link rel="contents" href="cover.html#minitoc">
<link rel="CSS-properties" href="propidx.html" title="properties">
<link rel="index" href="indexlist.html" title="index">
<link rel="first" href="cover.html">
</HEAD>
<BODY>
<div class="navbar">
<p><a href="sample.html">previous</a>
<a href="propidx.html">next</a>
<a href="cover.html#minitoc">contents</a>
<a href="propidx.html">properties</a>
<a href="indexlist.html">index</a>
</div>
<hr class="navbar">
<H1><a name="q0">Appendix E. Elaborate description of Stacking Contexts</a></H1>
<div class="subtoc">
<p><strong>Contents</strong>
<ul class="toc">
<li class="tocline2"><a href="zindex.html#stacking-defs" class="tocxref">E.1 Definitions</a>
<li class="tocline2"><a href="zindex.html#painting-order" class="tocxref">E.2 Painting order</a>
<li class="tocline2"><a href="zindex.html#stacking-notes" class="tocxref">E.3 Notes</a>
</ul>
</div>
<p>This chapter defines the CSS 2.1 painting order in more detail than
described in the rest of the specification.</p>
<h2>E.1 <a name="stacking-defs">Definitions</a></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.</dd>
<dt>Element</dt>
<dd>In this description, "element" refers to actual elements,
pseudo-elements, and anonymous boxes. 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>E.2 <a name="painting-order">Painting order</a></h2>
<p>The bottom of the stack is the furthest from the user, the top
of the stack is the nearest to the user:
<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>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>The painting order for the descendants of an element generating
a stacking context (see the <a href="visuren.html#propdef-z-index" class="noxref"><span
class="propinst-z-index">'z-index'</span></a> property) is:
<ol class=stack>
<li>
<p>If the element is a root element:
<ol>
<li>background color of element over the entire canvas.
<li>background image of element, over the entire canvas,
anchored at the origin that would be used if it was painted
for the root element.
</ol>
<li>
<p>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>
<p>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>
<p>Stacking contexts formed by positioned descendants with
negative z-indices (excluding 0) in z-index order (most
negative first) then tree order.
<li>
<p>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>
<p>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>
<p>All non-positioned floating descendants, in tree order. For
each one of these, treat the element as if it created a new
stacking context, but any positioned descendants and
descendants which actually create a new stacking context
should be considered part of the parent stacking context, not
this new one.
<li>
<p>If the element is an inline element that generates a
stacking context, then:
<ol>
<li>
<p>For each line box that the element is in:
<ol>
<li>Jump to <a href="#each-box">7.2.1</a> for the
box(es) of the element in that line box (in tree order).
</ol>
</ol>
<li>
<p>Otherwise: first for the element, then for all its in-flow,
non-positioned, block-level descendants in tree order:
<ol>
<li>
<p>If the element is a block-level replaced element, then:
the replaced content, atomically.
<li>
<p>Otherwise, for each line box of that element:
<ol>
<li id=each-box>
<p>For each box that is a child of that element, in
that line box, in tree order:
<ol>
<li>
<p>background color of element.
<li>
<p>background image of element.
<li>
<p>border of element.
<li>
<p>For inline elements:
<ol>
<li>
<p>For all the element's in-flow,
non-positioned, inline-level children that are
in this line box, and all runs of text inside
the element that is on this line box, in tree
order:
<ol>
<li>
<p>If this is a run of text, then:
<ol>
<li>any underlining affecting the text
of the element, in tree order of the
elements applying the underlining (such
that the deepest element's underlining,
if any, is painted topmost and the root
element's underlining, if any, is drawn
bottommost).
<li>any overlining affecting the text of
the element, in tree order of the
elements applying the overlining (such
that the deepest element's overlining,
if any, is painted topmost and the root
element's overlining, if any, is drawn
bottommost).
<li>the text.
<li>any line-through affecting the text
of the element, in tree order of the
elements applying the line-through (such
that the deepest element's line-through,
if any, is painted topmost and the root
element's line-through, if any, is drawn
bottommost).
</ol>
<li>
<p>Otherwise, jump to <a
href="#each-box">7.2.1</a> for that
element.
</ol>
</ol>
<p>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
positioned descendants and descendants which
actually create a new stacking context should be
considered part of the parent stacking context,
not this new one.
</ol>
<p>For inline-level replaced elements:
<ol>
<li>the replaced content, atomically.
</ol>
</ol>
<p class=note>Some of the boxes may have been
generated by line splitting or the Unicode
bidirectional algorithm.
<li>
<p>Optionally, the outline of the element (see <a
href="#outlines">10 below</a>).
</ol>
<li>
<p>Optionally, if the element is block-level, the outline
of the element (see <a href="#outlines">10 below</a>).
</ol>
<li>
<p>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 positioned descendants and 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>
<p>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 id=outlines>
<p>Finally, implementations that do not draw outlines in steps
above must draw outlines from this stacking context at this
stage. (It is recommended to draw outlines in this step and
not in the steps above.)
</ol>
<h2>E.3 <a name="stacking-notes">Notes</a></h2>
<p>The background of the root element is only painted once, over
the whole canvas.
<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 CSS 2.1,
the exact result of these two requirements is UA-defined. CSS3 may
define this in more detail.
<hr class="navbar">
<div class="navbar">
<p><a href="sample.html">previous</a>
<a href="propidx.html">next</a>
<a href="cover.html#minitoc">contents</a>
<a href="propidx.html">properties</a>
<a href="indexlist.html">index</a>
</div>
</BODY>
</HTML>