stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user, who is assumed to be facing the viewport or the webpage. HTML elements occupy this space in priority order based on element attributes.
In the previous part of this article,
Using z-index
, the rendering order of certain elements is influenced by their
z-index
value. This occurs because these elements have special properties which cause them to form a
stacking context
.
A stacking context is formed, anywhere in the document, by any element in the following scenarios:
<html>
).
position
value
absolute
or
relative
and
z-index
value other than
auto
.
position
value
fixed
or
sticky
(sticky for all mobile browsers, but not older desktop).
flexbox
) container, with
z-index
value other than
auto
.
grid
) container, with
z-index
value other than
auto
.
opacity
value less than
1
(见
the specification for opacity
).
mix-blend-mode
value other than
normal
.
none
:
isolation
value
isolate
.
-webkit-overflow-scrolling
value
touch
.
will-change
value specifying any property that would create a stacking context on non-initial value (see
this post
).
contain
value of
layout
，或
paint
, or a composite value that includes either of them (i.e.
contain: strict
,
contain: content
).
Within a stacking context, child elements are stacked according to the same rules previously explained. Importantly, the
z-index
values of its child stacking contexts only have meaning in this parent. Stacking contexts are treated atomically as a single unit in the parent stacking context.
In summary:
In this example, every positioned element creates its own stacking context, because of their positioning and
z-index
values. The hierarchy of stacking contexts is organized as follows:
It is important to note that DIV #4, DIV #5 and DIV #6 are children of DIV #3, so stacking of those elements is completely resolved within DIV#3. Once stacking and rendering within DIV #3 is completed, the whole DIV #3 element is passed for stacking in the root element with respect to its sibling's DIV.
注意事项：
<div id="div1">
<h1>Division Element #1</h1>
<code>position: relative;<br/>
z-index: 5;</code>
</div>
<div id="div2">
<h1>Division Element #2</h1>
<code>position: relative;<br/>
z-index: 2;</code>
</div>
<div id="div3">
<div id="div4">
<h1>Division Element #4</h1>
<code>position: relative;<br/>
z-index: 6;</code>
</div>
<h1>Division Element #3</h1>
<code>position: absolute;<br/>
z-index: 4;</code>
<div id="div5">
<h1>Division Element #5</h1>
<code>position: relative;<br/>
z-index: 1;</code>
</div>
<div id="div6">
<h1>Division Element #6</h1>
<code>position: absolute;<br/>
z-index: 3;</code>
</div>
</div>
* {
margin: 0;
}
html {
padding: 20px;
font: 12px/20px Arial, sans-serif;
}
div {
opacity: 0.7;
position: relative;
}
h1 {
font: inherit;
font-weight: bold;
}
#div1,
#div2 {
border: 1px dashed #696;
padding: 10px;
background-color: #cfc;
}
#div1 {
z-index: 5;
margin-bottom: 190px;
}
#div2 {
z-index: 2;
}
#div3 {
z-index: 4;
opacity: 1;
position: absolute;
top: 40px;
left: 180px;
width: 330px;
border: 1px dashed #900;
background-color: #fdd;
padding: 40px 20px 20px;
}
#div4,
#div5 {
border: 1px dashed #996;
background-color: #ffc;
}
#div4 {
z-index: 6;
margin-bottom: 15px;
padding: 25px 10px 5px;
}
#div5 {
z-index: 1;
margin-top: 15px;
padding: 5px 10px;
}
#div6 {
z-index: 3;
position: absolute;
top: 20px;
left: 180px;
width: 150px;
height: 125px;
border: 1px dashed #009;
padding-top: 125px;
background-color: #ddf;
text-align: center;
}
z-index
is not used.
z-index
to change default stacking.
z-index
on the last level
z-index
on all levels
z-index
on the second level