堆叠上下文示例 2
描述
这是一个非常简单的示例,但它是理解堆叠上下文概念的关键。它与前一个示例具有相同的四个 DIV,但现在在层次结构的两个级别上都分配了z-index
属性。
您可以看到 DIV #2(z-index
: 2)位于 DIV #3(z-index
: 1)之上,因为它们都属于同一个堆叠上下文(根堆叠上下文),所以 z-index 值决定了元素的堆叠方式。
奇怪的是,尽管它们的 z-index 值不同,但 DIV #2(z-index
: 2)位于 DIV #4(z-index
: 10)之上。原因是它们不属于同一个堆叠上下文。DIV #4 属于由 DIV #3 创建的堆叠上下文,如前所述,DIV #3(及其所有内容)位于 DIV #2 之下。
为了更好地理解这种情况,以下是堆叠上下文层次结构
- 根堆叠上下文
- DIV #2(
z-index
: 2) - DIV #3(
z-index
: 1)- DIV #4(
z-index
: 10)
- DIV #4(
- DIV #2(
注意:值得记住的是,HTML 层次结构与堆叠上下文层次结构不同。在堆叠上下文层次结构中,不创建堆叠上下文的元素在其父元素上被折叠。
示例
HTML
html
<div id="div1">
<br />
<span class="bold">DIV #1</span><br />
position: relative;
<div id="div2">
<br />
<span class="bold">DIV #2</span><br />
position: absolute;<br />
z-index: 2;
</div>
</div>
<br />
<div id="div3">
<br />
<span class="bold">DIV #3</span><br />
position: relative;<br />
z-index: 1;
<div id="div4">
<br />
<span class="bold">DIV #4</span><br />
position: absolute;<br />
z-index: 10;
</div>
</div>
CSS
css
div {
font: 12px Arial;
}
span.bold {
font-weight: bold;
}
#div2 {
z-index: 2;
}
#div3 {
z-index: 1;
}
#div4 {
z-index: 10;
}
#div1,
#div3 {
height: 80px;
position: relative;
border: 1px dashed #669966;
background-color: #ccffcc;
padding-left: 5px;
}
#div2 {
opacity: 0.8;
position: absolute;
width: 150px;
height: 200px;
top: 20px;
left: 170px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
#div4 {
opacity: 0.8;
position: absolute;
width: 200px;
height: 70px;
top: 65px;
left: 50px;
border: 1px dashed #000099;
background-color: #ddddff;
text-align: left;
padding-left: 10px;
}
结果
另请参阅
- 不使用 z-index 属性时的堆叠:不使用
z-index
时适用的堆叠规则。 - 堆叠浮动元素:如何使用堆叠处理浮动元素。
- 使用 z-index:如何使用
z-index
更改默认堆叠。 - 堆叠上下文:关于堆叠上下文的说明。
- 堆叠上下文示例 1:2 级 HTML 层次结构,最后一级上的
z-index
- 堆叠上下文示例 3:3 级 HTML 层次结构,第二级上的
z-index