1. z-index of the same level
<div class="container">
<div class="div1">
<h1>Division Element #1 z-index: 10</h1>
</div>
<div class="div2">
<h1>Division Element #2 z-index: 20</h1>
</div>
<div class="div3">
<h1>Division Element #3 z-index: 30</h1>
</div>
</div>
.container div {
position: relative;
padding: 10px;
width: 300px;
height: 200px;
opacity: 0.8;
}
.div1 {
z-index: 10;
background-color: #cfc;
}
.div2 {
top: -150px;
z-index: 20;
background-color: rgb(75, 204, 236);
}
.div3 {
top: -300px;
z-index: 30;
background-color: #fdd;
}
- Siblings are arranged in order according to their z-index size.
2. Different levels of z-index
<div class="container">
<div id="div1">
<div id="div1-1">
<h1>Division Element #1-1</h1>
<code
>position: relative;<br />
z-index: 55;</code
>
</div>
<h1>Division Element #1</h1>
<code
>position: relative;<br />
z-index: 50;</code
>
</div>
<div id="div2">
<h1>Division Element #2</h1>
<code
>position: relative;<br />
z-index: 20;</code
>
</div>
<div id="div3">
<div id="div4">
<h1>Division Element #4</h1>
<code
>position: relative;<br />
z-index: 60;</code
>
</div>
<h1>Division Element #30</h1>
<code
>position: absolute;<br />
z-index: 40;</code
>
<div id="div5">
<h1>Division Element #50</h1>
<code
>position: relative;<br />
z-index: 10;</code
>
</div>
<div id="div6">
<h1>Division Element #6</h1>
<code
>position: absolute;<br />
z-index: 30;</code
>
</div>
</div>
</div>
div {
position: relative;
}
h1 {
font: inherit;
font-weight: bold;
}
#div1,
#div2 {
border: 1px dashed #696;
padding: 10px;
background-color: #cfc;
}
#div1 {
z-index: 50;
margin-bottom: 190px;
}
#div1-1 {
z-index: 55;
padding: 10px;
background-color: rgb(107, 195, 230);
}
#div2 {
z-index: 20;
}
#div3 {
z-index: 40;
opacity: 1;
position: absolute;
top: 150px;
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: 60;
margin-bottom: 15px;
padding: 25px 10px 5px;
}
#div5 {
z-index: 10;
margin-top: 15px;
padding: 5px 10px;
}
#div6 {
z-index: 30;
position: absolute;
top: 20px;
left: 180px;
width: 150px;
height: 125px;
border: 1px dashed #009;
padding-top: 125px;
background-color: #ddf;
text-align: center;
}
- No matter how small the z-index of the internal element is set, it cannot be below the displayed external element.
- Compute z-index at different levels based on 1
Summary: The z-inde of the same level is actually easy to understand and not complicated. However, when there are multiple elements at the same level, there are multiple elements inside them, and these elements all have z-index set, it is a bit complicated. To put it simply Say, Element #1 and Division Element #3 in the picture above, according to the z-index setting, the green div is above the red div, but the descendant elements inside them, such as Division Element #1-1 and Division Element #4, even The z-index of the yellow div is higher than that of the blue div. The blue div is still above the yellow div. This is because their parents have already set the level. That is to say, the calculation priority of the parent is higher than itself. This is different from the way CSS selectors are summed.