Stacking context example 1

« CSS « Understanding CSS z-index

Stacking context 层叠上下文 例子 1

先看一个基础的例子。在根元素的层叠上下文中,有两个都是相对定位且没有设置 z-index 属性的 DIV(DIV #1 和 DIV #3)。在 DIV #1 中有一个绝对定位的 DIV #2,而在 DIV #3 中有一个绝对定位的 DIV #4,DIV #2 和 DIV #4 也都没有设置 z-index 属性。

现在唯一的层叠上下文就是根元素的上下文。因为没有 z-index 值,所有的元素按照出现(在 HTML 中)的顺序层叠。

Stacking context example 1

如果给 DIV #2 设置一个正的 z-index  值 (不能是 0 或 auto) ,那么 DIV #2 会渲染在其他所有 DIV 之上。

Stacking context example 1

然后如果给 DIV #4 也设置一个正的 z-index  值,且这个值比给的 DIV #2 设置的值要大,则 DIV #4  会渲染在其他所有 DIV(包括 DIV #2)之上。

Stacking context example 1

在这个列子中,DIV #2 和 DIV #4 不是兄弟关系(因为它们的父元素不同)。即便如此,我们也可以通过 z-index 来控制 DIV #4 和 DIV #2 的层叠关系。这是因为,DIV #1 和 DIV #3 没有设置 z-index 的值,所以它们不会创建层叠上下文。这就意味着 DIV #1 和 DIV #3 的所有内容(包括 DIV #2 和 DIV #4)都属于同一个层叠上下文(即根元素的层叠上下文)。

就层叠上下文而言,DIV #1 和 DIV #3 隶属于根元素,因此层次结构如下所示:

  • 根层叠上下文(root stacking context)
    • DIV #2 (z-index 1)
    • DIV #4 (z-index 2)
注意: DIV #1 和 DIV #3 不是透明的。记住所有设置了 opacity 小于 1 的定位元素都会隐式地生成一个层叠上下文(和给元素增加一个 z-index 值的效果相同)。上述的例子是为了说明,当父元素没有生成一个层叠上下文环境的时候,各元素是怎么层叠的。

Example

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>

</body></html>

CSS

.bold {
    font-weight: bold;
    font: 12px Arial;
}
#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: 70px;
    top: 65px;
    left: 50px;
    border: 1px dashed #000099;
    background-color: #ddddff;
    text-align: left;
    padding-left: 10px;
}

Result

See also

Original Document Information