不使用 z-index 属性的堆叠
当未在任何元素上指定 z-index 属性时，元素的堆叠顺序（从下到上）如下：
- 根元素的背景和边框。
- 子代非定位元素，按其在 HTML 中的出现顺序。
- 子代定位元素，按其在 HTML 中的出现顺序。
有关定位和非定位元素的说明，请参阅定位类型。
请记住，当 order 属性在 flex 容器中改变了呈现顺序（使其与 HTML 中的出现顺序不同）时，它同样会影响堆叠上下文的顺序。
示例
在此示例中，DIV #1 到 DIV #4 是定位元素。DIV #5 是静态的，因此它绘制在其他四个元素下方，尽管它在 HTML 标记中出现得更晚。
HTML
html
<div id="abs1" class="absolute">
<strong>DIV #1</strong><br />position: absolute;
</div>
<div id="rel1" class="relative">
<strong>DIV #2</strong><br />position: relative;
</div>
<div id="rel2" class="relative">
<strong>DIV #3</strong><br />position: relative;
</div>
<div id="abs2" class="absolute">
<strong>DIV #4</strong><br />position: absolute;
</div>
<div id="sta1" class="static">
<strong>DIV #5</strong><br />position: static;
</div>
CSS
css
strong {
font-family: sans-serif;
}
div {
padding: 10px;
border: 1px dashed;
text-align: center;
}
.static {
position: static;
height: 80px;
background-color: #ffffcc;
border-color: #999966;
}
.absolute {
position: absolute;
width: 150px;
height: 350px;
background-color: #ffdddd;
border-color: #990000;
opacity: 0.7;
}
.relative {
position: relative;
height: 80px;
background-color: #ccffcc;
border-color: #669966;
opacity: 0.7;
}
#abs1 {
top: 10px;
left: 10px;
}
#rel1 {
top: 30px;
margin: 0px 50px;
}
#rel2 {
top: 15px;
left: 20px;
margin: 0px 50px;
}
#abs2 {
top: 10px;
right: 10px;
}
#sta1 {
background-color: #ffffcc;
margin: 0px 50px;
}