CSS Positioning: Understanding z index: The stacking context

CSS定位：了解 z 索引：堆叠上下文

堆栈上下文是沿着假想相对于谁被假定为面向所述视口或所述网页用户的z轴的HTML元素的三维概念化。HTML元素根据元素属性以优先级顺序占据这个空间。

« CSS «了解 CSS z-index

堆栈环境

在前面的示例中，添加 z-index，某些 DIV 的渲染顺序受其 z-index 值的影响。发生这种情况是因为这些 DIV 具有特殊属性，这些属性会导致它们形成堆叠环境。

堆叠环境在文档中的任何位置由以下场景中的任何元素形成：

文档的根元素（HTML）。

在堆栈上下文中，子元素按照前面解释的相同规则进行堆栈。重要的是，它的子堆栈上下文的z-index值只对这个父类有意义。堆栈上下文在原始堆栈上下文中被视为一个单元。

综上所述：

堆栈上下文可以包含在其他堆栈上下文中，并一起创建堆栈上下文的层次结构。

注意：堆栈上下文的层次结构是HTML元素层次结构的子集，因为只有某些元素创建堆栈上下文。我们可以说，不会创建自己的堆栈上下文的元素被父堆栈上下文所吸收。

例子

在这个例子中，每个定位元素都会创建自己的堆栈上下文，因为它们的定位和z-index值。堆栈上下文的层次结构如下所示：

Root

值得注意的是，DIV＃4，DIV＃5和DIV＃6是DIV＃3的孩子，因此这些元素的堆叠在DIV＃3中完全解决。一旦DIV＃3中的堆叠和渲染完成后，整个DIV＃3元素就相对于其同级的DIV在根元素中进行堆栈传递。

说明：

DIV＃4在DIV＃1下呈现，因为DIV＃1的z-index（5）在根元素的堆栈上下文内有效，而DIV＃4的z-index（6）在DIV＃3的堆栈上下文内有效。因此，DIV＃4在DIV＃1下，因为DIV＃4属于具有较低Z-索引值的DIV＃3。

    - DIV #1 - z-index is 5

例

HTML

<div id="div1">
  <h1>Division Element #1</h1>
  <code>position: relative;<br/>
  z-index: 5;</code>
</div>

<div id="div2">
  <h1>Division Element #2</h1>
  <code>position: relative;<br/>
  z-index: 2;</code>
</div>

<div id="div3">
  <div id="div4">
    <h1>Division Element #4</h1>
    <code>position: relative;<br/>
    z-index: 6;</code>
  </div>

  <h1>Division Element #3</h1>
  <code>position: absolute;<br/>
  z-index: 4;</code>

  <div id="div5">
    <h1>Division Element #5</h1>
    <code>position: relative;<br/>
    z-index: 1;</code>
  </div>
   
  <div id="div6">
    <h1>Division Element #6</h1>
    <code>position: absolute;<br/>
    z-index: 3;</code>
  </div>
</div>

CSS

* {
  margin: 0;
}
html {
  padding: 20px;
  font: 12px/20px Arial, sans-serif;
}
div {
  opacity: 0.7;
  position: relative;
}
h1 {
  font: inherit;
  font-weight: bold;
}
#div1,
#div2 {
  border: 1px dashed #696;
  padding: 10px;
  background-color: #cfc;
}
#div1 {
  z-index: 5;
  margin-bottom: 190px;
}
#div2 {
  z-index: 2;
}
#div3 {
  z-index: 4;
  opacity: 1;
  position: absolute;
  top: 40px;
  left: 180px;
  width: 330px;
  border: 1px dashed #900;
  background-color: #fdd;
  padding: 40px 20px 20px;
}
#div4,
#div5 {
  border: 1px dashed #996;
  background-color: #ffc;
}
#div4 {
  z-index: 6;
  margin-bottom: 15px;
  padding: 25px 10px 5px;
}
#div5 {
  z-index: 1;
  margin-top: 15px;
  padding: 5px 10px;
}
#div6 {
  z-index: 3;
  position: absolute;
  top: 20px;
  left: 180px;
  width: 150px;
  height: 125px;
  border: 1px dashed #009;
  padding-top: 125px;
  background-color: #ddf;
  text-align: center;
}

CSS Positioning: Understanding z index: The stacking context

CSS定位：了解 z 索引：堆叠上下文

堆栈环境

例子

例

HTML

CSS

结果