堆疊上下文示例 1
描述
我們從一個基本示例開始。在根堆疊上下文中，有兩個相對定位的 <div> 元素（DIV #1 和 DIV #3）沒有 z-index 屬性。在 DIV #1 內部，有一個絕對定位的 DIV #2，而在 DIV #3 內部，有一個絕對定位的 DIV #4，兩者都沒有 z-index 屬性。
唯一的堆疊上下文是根上下文。在沒有 z-index 值的情況下，元素按照出現的順序堆疊。
如果 DIV #2 被分配了一個正的（非零和非 auto）z-index 值，它將渲染在所有其他 DIV 的上方。
然後，如果 DIV #4 也被分配了一個正的 z-index 值，且該值大於 DIV #2 的 z-index，它將渲染在所有其他 DIV 的上方，包括 DIV #2。
在最後一個示例中，您可以看到 DIV #2 和 DIV #4 不是同級元素，因為它們在 HTML 元素層次結構中屬於不同的父級。即便如此，DIV #4 相對於 DIV #2 的堆疊可以透過 z-index 進行控制。發生這種情況是因為 DIV #1 和 DIV #3 沒有被分配任何 z-index 值，它們沒有建立堆疊上下文。這意味著它們的所有內容，包括 DIV #2 和 DIV #4，都屬於同一個根堆疊上下文。
在堆疊上下文方面，DIV #1 和 DIV #3 被同化到根元素中，結果的層次結構如下：
- 根堆疊上下文
- DIV #2 (
z-index: 1) - DIV #4 (
z-index: 2)
- DIV #2 (
注意：DIV #1 和 DIV #3 不是半透明的。需要記住的是，將定位元素的 opacity 設定為小於 1 的值會隱式建立一個堆疊上下文，就像新增 z-index 值一樣。本示例展示了當父元素不建立堆疊上下文時會發生什麼。
示例
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: 1;
</div>
</div>
<br />
<div id="div3">
<br /><span class="bold">DIV #3</span> <br />position: relative;
<div id="div4">
<br /><span class="bold">DIV #4</span> <br />position: absolute;
<br />z-index: 2;
</div>
</div>
CSS
css
.bold {
font-family: "Arial";
font-size: 12px;
font-weight: bold;
}
#div1,
#div3 {
height: 80px;
position: relative;
border: 1px dashed #669966;
background-color: #ccffcc;
padding-left: 5px;
}
#div2 {
opacity: 0.8;
z-index: 1;
position: absolute;
width: 150px;
height: 200px;
top: 20px;
left: 170px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
#div4 {
opacity: 0.8;
z-index: 2;
position: absolute;
width: 200px;
height: 80px;
top: 65px;
left: 50px;
border: 1px dashed #000099;
background-color: #ddddff;
text-align: left;
padding-left: 10px;
}