CSS Positioning: Understanding z index: The stacking context

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

« CSS «了解 CSS z-index

堆栈环境

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

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

• 文档的根元素（HTML）。
• 具有position“绝对”或“相对” z-index值和“自动”以外的值的元素。
• position值为“固定”或“粘滞”的元素（适用于所有移动浏览器，但不适用于旧桌面）。
• 元素是flex（flexbox）容器的子元素，其z-index值不是“auto”。
• opacity值小于1的元素（请参阅不透明度规范）。
• 元素的mix-blend-mode值不是“正常”。
• 具有以下任何非“无”值的元素：
  • transform
  • filter
  • perspective
  • clip-path
  • mask / mask-image / mask-border
• 具有isolation值“隔离”的元素。
• 具有-webkit-overflow-scrolling“touch”值的元素。
• 具有will-change值的元素，指定将在非初始值上创建堆栈上下文的任何属性（请参阅此文章）。

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

综上所述：

• 堆栈上下文可以包含在其他堆栈上下文中，并一起创建堆栈上下文的层次结构。
• 每个堆栈上下文都完全独立于其同胞：在处理堆栈时仅考虑后代元素。
• 每个堆栈上下文都是独立的：在堆栈元素的内容之后，整个元素被视为父堆栈上下文的堆栈顺序。

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

例子

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

• Root
  • DIV #1
  • DIV #2
  • DIV #3
    • DIV #4
    • DIV #5
    • DIV #6

值得注意的是，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＃2（z-索引2）在DIV＃5（z索引1）下呈现，因为DIV＃5属于具有较高z索引值的DIV＃3。
• DIV＃3的z-index是4，但是这个值与DIV＃4，DIV＃5和DIV＃6的z-index无关，因为它属于不同的堆栈上下文。
• 找出沿Z轴堆栈元素的渲染顺序的一种简单方法是将其视为“排序的版本号”，其中子元素是父级主版本号下的次版本号。这样，我们可以很容易地看到z-index为1（DIV＃5）的元素如何堆栈在z-index为2（DIV＃2）的元素上方，以及z-索引为6 （DIV＃4）堆栈在z-index为5（DIV＃1）的元素下面。在我们的例子中（根据最终渲染顺序排序）：
  • DIV #2 - z-index is 2
• DIV #3 - z-index is 4
  • DIV #5 - z-index is 1, stacked under an element with a z-index of 4, which results in a rendering order of 4.1
  • DIV #6 - z-index is 3, stacked under an element with a z-index of 4, which results in a rendering order of 4.3
  • DIV #4 - z-index is 6, stacked under an element with a z-index of 4, which results in a rendering order of 4.6

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

结果