MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

« CSS « 理解CSS z-index

层叠上下文示例 2

这是一个非常简单的例子, 但它是理解层叠上下文这个概念的关键。还是和之前的例子中一样的四个DIV,不过现在z-index属性被分配在两个水平的层次结构中。

可以看到现在DIV #2 (z-index: 2)在DIV #3 (z-index: 1)的上面,因为他们都属于同一个层叠上下文(根元素创建的层叠上下文),所以z-index的值决定了元素如何叠放。

奇怪的是DIV #2 (z-index: 2)在DIV #4 (z-index: 10)的上面,尽管DIV #2的z-index值小于DIV #4。原因在于它们不属于同一个层叠上下文。DIV #4处于DIV #3所创建的层叠上下文中,而整个DIV #3(包含其后代元素)是在DIV #2下面的。

为了更好的理解这种情况, 这里列出了层叠上下文的层次结构:

  • 根上下文(root stacking context)
    • DIV #2 (z-index 2)
    • DIV #3 (z-index 1)
      • DIV #4 (z-index 10)
Note: 值得记住的是,通常HTML的层次结构和层叠上下文的层次结构是不同的。在层叠上下文的层次结构中,没有创建层叠上下文的元素同其父级处于一个层叠上下文。

示例源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><style type="text/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;
}


</style></head>

<body>

    <br />

    <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>

</body>
</html>

相关文章

原文信息

 

文档标签和贡献者

 此页面的贡献者: Skyrelu
 最后编辑者: Skyrelu,