堆疊上下文示例 2
描述
這是一個基本的例子，但它是理解堆疊上下文概念的關鍵。這裡有與上一個示例相同的四個 DIV，但現在層級結構的兩個級別都分配了 z-index 屬性。
你可以看到 DIV #2 (z-index: 2) 在 DIV #3 (z-index: 1) 之上，因為它們都屬於同一個堆疊上下文（根堆疊上下文），所以 z-index 值決定了元素的堆疊方式。
可能令人感到奇怪的是，DIV #2 (z-index: 2) 儘管 z-index 值不同，但卻在 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;
}