堆叠上下文示例 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;
}