z-index 属性是如何生效的？

「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」。

z-index 属性可能看起来很简单，但它不仅仅是使用正整数或负整数。在使用它时浏览器背后还有很多事情要做，一不小心一些奇怪的问题就会出现。在本文中，我们将深入研究 z-index 属性并了解它的实际工作原理。

z-index 控制堆叠顺序并创建堆叠上下文。因此，首先让我们了解这些术语的含义。

堆叠顺序

当浏览器沿 z 轴呈现网页元素时，它必须首先选择要在画布上绘制的元素。

这些元素的顺序称为堆叠顺序。

在我们进一步讨论使用 z-index 属性的堆叠顺序之前，让我们了解默认堆叠是什么样的：

根元素的背景和边框。
非定位块元素（按出现顺序）
非定位浮动元素（按出现顺序）
内联元素（按出现顺序）
定位元素（按出现顺序）

根元素背景和边框代表堆栈的最低级别。定位元素代表堆栈的最高级别。注意：定位元素是相对的、固定的、绝对的或粘性的元素——除了静态之外的任何元素。非定位元素位于内联元素和定位元素之下。如果我们更改代码并将相对位置添加到第二个 div 中，那么它将隐藏内联元素。

z-index 属性的工作原理

z-index 属性用于更改元素的默认堆叠顺序。

z-index 可以取 3 个值之一：

auto：元素的堆栈顺序与其父元素的堆栈顺序相同。这是默认值。
整数：可以是正数或负数。
inherit：将值设置为与父元素的值相同。

z-index 仅适用于定位元素。（嗯，这并不完全正确，因为也有一些边缘情况——但我们将在下面讨论这些情况。）最高的正 z-index 值表示离用户最近的那个，最低的负 z-index 值表示离用户最远的那个。上面的 codepen 示例与默认堆叠顺序示例的代码相同，但我只是在第 3 个元素代码中更改了一行。

z-index: -1;

我添加了一个负 z-index，因此它将定位元素隐藏在非定位元素下方。

当我们在定位元素上指定 z-index 时，它会创建一个堆叠上下文。

随着堆叠上下文的引入，简单的 z-index 属性变得有点复杂。

堆叠上下文

具有共同父元素的元素组在堆叠顺序中一起向前或向后移动构成所谓的堆叠上下文。（来自w3.org的官方定义。）

根元素 (HTML) 形成根堆叠上下文。其他堆叠上下文由任何具有“z-index”计算值而不是“auto”的定位元素（包括相对定位的元素）生成。堆叠上下文不一定与包含块相关。我希望这个定义是有意义的。

HTML 标记形成根堆叠上下文，默认情况下，所有元素都属于此堆叠上下文。

但是通过使用定位元素和除“auto”值之外的 z-index，我们可以创建本地堆叠上下文。该元素在本地堆叠上下文中称为根元素。

父元素的子元素属于该本地堆叠上下文，它们按照堆叠顺序一起前后移动。

为什么我们需要了解堆叠上下文

那么，如果您可以通过给出正值或负值来简单地使用 z-index，那么为什么要了解所有这些内容呢？

让我给你一个简单的问题：我们有 3 个 z-index 值分别为 1、999 和 2 的 div。但令人困惑的是第二个 div 的 z-index 值为 999（最高值）——它仍然无法排在前面第三个分区。

这就是我们的理解派上用场的地方：这一切都是由于堆叠上下文而发生的。

让我们找出原因。

看看 HTML：

<main>
      <div class="first">1</div>
      <div class="second">999</div>
   </main>
   <div class="third">2</div>

我们有三个类名分别为 first、second 和 third 的 div。第一个和第二个 div 被包装到主标签中。

这是CSS：

.first {
  z-index: 1;
}

.second {
  z-index: 999;
}

.third {
  z-index: 2;
}

您可以看到第二个 div 具有最高的 z-index 值。仍然，它不能出现在第三个 div 前面。

这一切都是因为这行代码👇

main {
  position: relative;
  z-index: 1;
}

主要元素是创建一个本地堆叠上下文，第一个和第二个 div 属于同一个本地堆叠上下文 - 但第三个 div 不属于。

这就是为什么第二个 div 能够排在第一个之前的原因：因为它的 z-index 值为 999（高于第一个 div）。

主标签和第三个 div 是根元素的子元素，都具有 z-index 值。

主元素的 z-index 值为 1，第三个元素的 z-index 值为 2。第三个元素的 z-index 值较高，这就是为什么第三个 div 能够出现在主标签前面的原因。

我希望您现在了解堆叠上下文的工作原理以及您需要了解它的原因。

如何创建堆叠上下文

我们已经看到了如何结合定位（尤其是相对和绝对）与 z-index 来创建堆叠上下文——但这不是唯一的方法！以下是其他一些：

使用位置固定或粘性（这些值不需要 z-index！）
向 display: flex 或 display: grid 容器中的子元素添加 z-index 值
添加小于 1 的不透明度值

结论

我知道这些事情令人困惑并且有点复杂。

我希望在阅读本文并练习 z-index 属性后，您了解幕后的工作原理。