理解 z-index

z 轴上的层

页面上渲染的元素由一系列盒子组成。每个盒子在三维空间中都有一个位置。除了其行内和块级位置之外，盒子还沿着被称为 z 轴的第三维放置。当元素盒子在视觉上重叠时，控制元素的 z 轴位置变得尤为重要。一些属性值可能导致元素重叠。z-index 属性为您提供了一种控制它们如何重叠的方法！

默认情况下，元素盒子渲染在第 0 层。z-index 属性允许您除了默认渲染层之外，将元素放置在 z 轴上不同的层上。每个元素沿着假想 z 轴的位置（z-index 值）表示为一个整数（正、负或零），并控制渲染时的堆叠顺序。数字越大意味着元素离观察者越近。

如果您不熟悉“z 轴”这个术语，请将页面想象成一堆层，每层都有一个分配的数字。层按数字顺序渲染，数字大的层显示在数字小的层之上（下表中的 X 代表任意正整数）

正常流中的元素

默认情况下，当未指定 z-index 属性时，元素会在默认渲染层（第 0 层）上渲染。

考虑以下三个元素

<div id="div1">#1</div>
<div id="div2">#2</div>
<div id="div3">#3</div>

在未应用任何定位属性的情况下，这些元素按文档顺序正常流动，一个接一个，互不重叠。

div {
  height: 100px;
  width: 100px;
  outline: 1px dotted;
  line-height: 100px;
  font-size: 40px;
  text-align: center;
  font-family: "Helvetica", "Arial", sans-serif;
}

#div1 {
  background-color: lightpink;
}

#div2 {
  background-color: lightyellow;
}

#div3 {
  background-color: lightgreen;
}

默认分层行为

要堆叠元素，我们可以对它们进行定位。如果我们使用绝对定位将它们放置在（几乎）相同的位置，默认的堆叠顺序遵循源顺序：HTML 中第一个元素显示在最底层，最后一个元素显示在最顶层。

div {
  position: absolute;
}

#div1 {
  top: 0;
  left: 0;
}

#div2 {
  top: 10px;
  left: 10px;
}

#div3 {
  top: 20px;
  left: 20px;
}

重新排列层

我们可以使用 CSS z-index 属性来定位每个元素沿 z 轴，从而有效地重新排列堆叠顺序。

通过添加 z-index 值，我们改变了默认的层顺序

#div1 {
  z-index: 5;
}

#div2 {
  z-index: -9;
}

#div3 {
  z-index: 0;
}

z-index 值最低的元素显示在最底层。z-index 值最高的元素显示在最顶层。在此示例中，-9 是最低值，因此 #div2 在所有其他元素之后。源顺序中的第一个元素 #div1 具有最大值，因此它显示在所有其他元素之上。

堆叠上下文的影响

z-index 的使用乍一看似乎相当简单：一个属性被赋予一个整数，其行为似乎易于理解。当 z-index 应用于复杂的 HTML 元素层级结构时，许多人发现其产生的行为难以理解或预测。

如果元素不是兄弟元素，堆叠行为会变得更加复杂，因为每个元素可能属于不同的堆叠上下文。这在下面的示例中有所体现。

<section>
  <div id="div1">#1</div>
  <div id="div2">#2</div>
</section>
<div id="div3">#3</div>

section {
  position: absolute;
  z-index: 2;
}

尽管 #div3 的 z-index 值 (0) 大于 #div2 (-9)，但 #div2 出现在 #div3 之上，因为 #div1 和 #div2 嵌套在由 <section> 创建的单独堆叠上下文。<section> 元素和 #div3 是兄弟元素，由于 <section> 元素的 z-index 大于 #div3 (2 对 0)，所以 #div3 放置在 <section> 及其所有内容之后。有关此主题的更深入详细信息，请参阅我们的堆叠上下文指南。

总结

正如我们在本指南中看到的那样，z-index 提供了一种控制元素沿 z 轴堆叠方式的方法。您学习了如何使用 z-index 属性的整数值来改变堆叠顺序。然而，正如最后一个示例所示，堆叠顺序可能很复杂。堆叠顺序遵循一系列复杂的堆叠规则，以确保所有浏览器以相同的方式堆叠相同的内容，从而提供一致性和可预测性。理解创建堆叠上下文的特征以及嵌套堆叠上下文如何影响层顺序非常重要。

另见

• 不使用 z-index 属性的堆叠
• 层叠浮动元素
• 使用 z-index
• 层叠上下文
• CSS 定位布局模块