A stacking context is formed, anywhere in the document, by any element in the following scenarios:
Root element of the document (<html>).
Element with a position value absolute or relative and z-index value other than auto.
Element with a position value fixed or sticky.
Element with a container-type value size or inline-size set (See container queries).
Element that is a flex item with a z-index value other than auto.
Element that is a grid item with z-index value other than auto.
Element with an opacity value less than 1.
Element with a mix-blend-mode value other than normal.
Element with any of the following properties with a value other than none:
Element with the isolation value isolate.
Element with a will-change value specifying any property that would create a stacking context on non-initial value.
Element with a contain value of layout or paint, or a composite value that includes either of these values (i.e., contain: strict, contain: content).
Element placed into the top layer and its corresponding ::backdrop. Examples include fullscreen and popover elements.
Element that has had stacking context-creating properties (such as opacity) animated using @keyframes, with animation-fill-mode set to forwards.
Stacking contexts can be contained in other stacking contexts, and they can together create a hierarchy of stacking contexts.
The root element of a document is a stacking context which, in most cases, contains nested stacking contexts, many of which will contain additional stacking contexts. Within each stacking context, child elements are stacked according to the same rules explained in Using z-index. Importantly, the z-index values of its child stacking contexts only have meaning within its parent's stacking context. Stacking contexts are treated atomically as a single unit in the parent stacking context.
To figure out the rendering order of stacked elements along the z-axis, think of each index value as a "version number" of sorts, where child elements represent minor version numbers underneath their parent's major version number.
To demonstrate how the stacking order of each element participates in the stacking order of their ancestor stacking contexts, let's look at an example page with six container elements. There are three sibling <article> elements. The last <article> contains three sibling <section> elements, with the <h1> and <code> of that third article appearing between the first and second sibling <section> elements.
<article id="container1">
<h1>Article element #1</h1>
<code>
position: relative;<br />
z-index: 5;
</code>
</article>
<article id="container2">
<h1>Article Element #2</h1>
<code>
position: relative;<br />
z-index: 2;
</code>
</article>
<article id="container3">
<section id="container4">
<h1>Section Element #4</h1>
<code>
position: relative;<br />
z-index: 6;
</code>
</section>
<h1>Article Element #3</h1>
<code>
position: absolute;<br />
z-index: 4;
</code>
<section id="container5">
<h1>Section Element #5</h1>
<code>
position: relative;<br />
z-index: 1;
</code>
</section>
<section id="container6">
<h1>Section Element #6</h1>
<code>
position: absolute;<br />
z-index: 3;
</code>
</section>
</article>
Every container element has an opacity of less than 1 and a position of either relative or absolute set. These property-value pairs create a stacking context when the element has z-index value other than auto.
* {
margin: 0;
}
html {
padding: 20px;
font:
12px/20px Arial,
sans-serif;
}
h1 {
font-size: 1.25em;
}
#container1,
#container2 {
border: 1px dashed #669966;
padding: 10px;
background-color: #ccffcc;
}
#container1 {
margin-bottom: 190px;
}
#container3 {
border: 1px dashed #990000;
background-color: #ffdddd;
padding: 40px 20px 20px;
width: 330px;
}
#container4 {
border: 1px dashed #999966;
background-color: #ffffcc;
padding: 25px 10px 5px;
margin-bottom: 15px;
}
#container5 {
border: 1px dashed #999966;
background-color: #ffffcc;
margin-top: 15px;
padding: 5px 10px;
}
#container6 {
background-color: #ddddff;
border: 1px dashed #000099;
padding-left: 20px;
padding-top: 125px;
width: 150px;
height: 125px;
}
section,
article {
opacity: 0.85;
position: relative;
}
#container1 {
z-index: 5;
}
#container2 {
z-index: 2;
}
#container3 {
z-index: 4;
position: absolute;
top: 40px;
left: 180px;
}
#container4 {
z-index: 6;
}
#container5 {
z-index: 1;
}
#container6 {
z-index: 3;
position: absolute;
top: 20px;
left: 180px;
}
The CSS properties for colors, fonts, alignment, and box-model have been hidden for brevity.
The hierarchy of stacking contexts in the above example is as follows:
Root â âââ ARTICLE #1 âââ ARTICLE #2 âââ ARTICLE #3 â âââ SECTION #4 âââââ ARTICLE #3 content âââ SECTION #5 âââ SECTION #6
The three <section> elements are children of ARTICLE #3. Therefore, the stacking of the section elements is completely resolved within ARTICLE #3. Once stacking and rendering within ARTICLE #3 is completed, the whole ARTICLE #3 element is passed for stacking in the root element with respect to its sibling <article> elements.
By comparing the z-index as "version numbers", we can see how an element with a z-index of 1 (SECTION #5) is stacked above an element with a z-index of 2 (ARTICLE #2), and how an element with a z-index of 6 (SECTION #4) is stacked below an element with a z-index of 5 (ARTICLE #1). SECTION #4 is rendered under ARTICLE #1 because ARTICLE #1's z-index (5) is valid within the stacking context of the root element, while SECTION #4's z-index (6) is valid within the stacking context of ARTICLE #3 (z-index: 4). So SECTION #4 is under ARTICLE #1 because SECTION #4 belongs to ARTICLE #3, which has a lower z-index value (4-6 is less than 5-0).
For the same reason, ARTICLE #2 (z-index: 2) is rendered under SECTION #5 (z-index: 1) because SECTION #5 belongs to ARTICLE #3 (z-index: 4), which has a higher z-index value (2-0 is less than 4-1).
ARTICLE #3's z-index is 4, but this value is independent of the z-index of three sections nested inside it because they belong to a different stacking context.
In our example (sorted according to the final rendering order):
ARTICLE #2: (z-index: 2), which results in a rendering order of 2-0
ARTICLE #3: (z-index: 4), which results in a rendering order of 4-0
z-index: 1), stacked under an element (z-index: 4), which results in a rendering order of 4-1z-index: 3), stacked under an element (z-index: 4), which results in a rendering order of 4-3z-index: 6), stacked under an element (z-index: 4), which results in a rendering order of 4-6ARTICLE #1: (z-index: 5), which results in a rendering order of 5-0
Additional examples include a 2-level hierarchy with z-index on the last level, a 2-level HTML hierarchy, z-index on all levels, and a 3-level HTML hierarchy, z-index on the second level.
z-index propertyRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4