深入理解 CSS z-index：为什么更低的 z-index 有时会覆盖更高的元素？

一、z-index工作原理

z-index 是 CSS 中常用的属性，用于控制元素在 Z 轴上的显示顺序（即前后位置）。但在实际开发中，有时会出现意料之外的现象：你设置了一个元素的 z-index 比另一个元素高，却发现它仍然被更低的元素遮盖。这通常是由**堆叠上下文（stacking context）**的机制引起的。

本文将深入探讨 z-index 的工作原理，解释为什么更高的 z-index 并不总是确保元素位于页面最前面，并提供一些最佳实践来避免这些问题。

什么是 z-index？
z-index 用于定义元素在 Z 轴上的堆叠顺序。z-index 值越大，元素越靠近用户，也就越容易在其他元素的上方显示。z-index 只有在元素具有 position 属性（absolute、relative、fixed、sticky）时才生效。

例子：

<div class="box1"></div>
<div class="box2"></div>

.box1 {
  position: absolute;
  z-index: 10;
  background: red;
  width: 100px;
  height: 100px;
}

.box2 {
  position: absolute;
  z-index: 5;
  background: blue;
  width: 100px;
  height: 100px;
  top: 50px;
}

在这个简单的例子中，.box1 的 z-index 是 10，而 .box2 是 5，因此 .box1 应该覆盖 .box2。

二、堆叠上下文（Stacking Context）的概念

堆叠上下文是 CSS 中的一个重要概念，它决定了元素的层叠顺序。一个新的堆叠上下文通常在满足特定条件时被创建，比如以下几种情况：

元素的 position 为 absolute、relative、fixed 或 sticky 并且 z-index 值不是 auto。
元素的 opacity 小于 1。
元素使用了 transform、filter、perspective 等属性。
当一个元素创建了堆叠上下文时，所有它的子元素都会被限制在这个上下文中。无论这些子元素的 z-index 值如何，它们的显示顺序都不会与外部的元素竞争。这意味着在不同的堆叠上下文中，z-index 的比较是局部的，而不是全局的。

例子：

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>
<div class="sibling"></div>

.parent {
  position: relative;
  z-index: 1;
}

.child1 {
  position: absolute;
  z-index: 10;
  background: red;
  width: 100px;
  height: 100px;
}

.child2 {
  position: absolute;
  z-index: 5;
  background: blue;
  width: 100px;
  height: 100px;
  top: 50px;
}

.sibling {
  position: relative;
  z-index: 2;
  background: green;
  width: 100px;
  height: 100px;
  top: 100px;
}

在上面的例子中，我们可以通过 z-index 的设置来理解堆叠上下文和元素的显示顺序：

父元素 .parent 设置了 position: relative; 和 z-index: 1;，因此它创建了一个新的堆叠上下文。这个堆叠上下文内的元素的 z-index 值，只能在该上下文内与其他子元素进行比较，不会影响外部的元素。

子元素 .child1 和 .child2：

.child1 设置了 position: absolute; 和 z-index: 10;，因此它会在 .parent 的堆叠上下文内处于更高的层级，显示在 .child2 之上。
.child2 同样设置了 position: absolute;，但它的 z-index 是 5，比 .child1 的低，所以会被 .child1 覆盖。
兄弟元素 .sibling：

.sibling 元素位于 .parent 外部，设置了 position: relative; 和 z-index: 2;。虽然 .sibling 的 z-index 值是 2，比 .child1 和 .child2 的 z-index 值小，但它不属于 .parent 的堆叠上下文，而是在文档流的上层堆叠上下文中，所以它会叠加在整个 .parent 元素（及其内部子元素）之上。

层级分析
.child1 和 .child2 都处于 .parent 的堆叠上下文内，所以它们的 z-index 值只在这个上下文中有效。即使 .child1 的 z-index: 10 比 .sibling 的 z-index: 2 大，它仍然会被 .sibling 覆盖，因为 .sibling 位于不同的、更外层的堆叠上下文中。

.sibling 的 z-index: 2 是在它所在的全局堆叠上下文中生效的，它和 .parent 处于同一级别，因此 .sibling 会在 .parent 之上显示。

.child1 显示在 .child2 之上，因为在 .parent 的堆叠上下文中，.child1 的 z-index: 10 高于 .child2 的 z-index: 5。

总结堆叠上下文的工作原理

堆叠上下文是局部的，元素在自己所在的堆叠上下文中参与层级比较。如果某个元素创建了一个新的堆叠上下文，它的子元素的 z-index
只在该上下文中有效，无法与外部元素进行比较。如果一个元素没有显示设定
z-index，它将与其父元素共享同一个堆叠上下文，并按其在文档中的顺序显示。
通过理解这个例子，堆叠上下文的概念变得更加直观。你可以控制每个元素的显示顺序，不仅仅通过
z-index，还可以通过理解哪些元素创建了新的堆叠上下文。

触发堆叠上下文的其他方式
除了 position 和 z-index，还有其他属性也可以触发堆叠上下文，例如：

opacity：当 opacity 小于 1 时，会创建一个新的堆叠上下文。
transform、filter、perspective：这些属性会自动触发堆叠上下文。
will-change：当你明确指定元素的某个属性即将发生变化时，也会创建新的堆叠上下文。

通过这些方式，你可以在布局中创建独立的上下文，以更好地管理层叠关系

<div class="parent">
  <div class="child1"></div>
  <div class="child2"></div>
</div>
<div class="sibling"></div>

.parent {
  position: relative;
  opacity: 0.9; /* Creates a stacking context */
}

.child1 {
  position: absolute;
  z-index: 10;
  background: red;
  width: 100px;
  height: 100px;
}

.child2 {
  position: absolute;
  z-index: 5;
  background: blue;
  width: 100px;
  height: 100px;
  top: 50px;
}

.sibling {
  position: relative;
  z-index: 2;
  background: green;
  width: 100px;
  height: 100px;
  top: 100px;
}

在这个例子中，.parent 元素通过 opacity: 0.9 触发了新的堆叠上下文。在这种情况下，堆叠的顺序仍然遵循之前的规则：.sibling 的 z-index 在更外层的堆叠上下文中生效，因此它会覆盖 .parent 及其子元素

最终提示
堆叠上下文是页面布局中的关键概念，理解它有助于在复杂布局中准确控制元素的层叠顺序。当你使用 z-index 解决层叠问题时，首先要确定元素是否位于同一个堆叠上下文中，如果不在同一个上下文中，即便 z-index 设置再高也不会生效

三、堆叠顺序（Stacking Order）

在了解了 z-index 和堆叠上下文（Stacking Context）后，我们需要深入理解**堆叠顺序（Stacking Order）**的概念。当多个元素处于同一个堆叠上下文中时，它们的堆叠顺序根据一定的规则决定。CSS 中的默认堆叠顺序遵循以下几条规则，按从低到高的顺序排列：

背景和边框（background and borders）
每个盒子模型的背景和边框处于堆叠顺序的最底层，这意味着无论其他元素如何显示，背景色和边框会先渲染。
负 z-index 的元素（z-index < 0）
如果一个元素设置了负的 z-index 值，那么它将堆叠在背景和边框的上面，但在其他大多数元素之下。需要注意的是，负的 z-index 只在它的堆叠上下文中有效。
非定位的块级和行内级子元素
没有设置 position 属性的普通块级元素和行内级元素将根据它们在 HTML 文档中的顺序渲染。这些元素按照文档流（normal flow）的顺序堆叠。
浮动元素（floated elements）
浮动元素（设置 float 属性的元素）在默认的堆叠顺序中会堆叠在非定位的块级和行内级元素的上方。
定位元素（positioned elements）且 z-index 为 auto
设置了 position: relative;、position: absolute; 或 position: fixed; 的元素，如果没有明确指定 z-index，它们的堆叠顺序仍然遵循文档中的顺序，但它们会堆叠在浮动元素之上。
z-index >= 0 的元素
具有正 z-index 的元素将堆叠在所有上述元素之上，并且它们的堆叠顺序取决于 z-index 值的大小。z-index 值越大，元素越靠前。需要注意的是，如果多个元素具有相同的 z-index 值，那么它们的堆叠顺序仍然会基于它们在 HTML 文档中的顺序。

示例

以下示例展示了上述堆叠顺序的实现：

<div class="background">背景</div>
<div class="negative-zindex">负 z-index</div>
<div class="normal-flow">正常文档流</div>
<div class="floated">浮动元素</div>
<div class="positioned">定位元素</div>
<div class="positive-zindex">正 z-index</div>

.background {
  position: relative;
  background-color: lightgray;
  height: 100px;
  width: 100%;
  z-index: auto; /* 没有 z-index，背景处于最底层 */
}

.negative-zindex {
  position: relative;
  z-index: -1; /* 负 z-index，位于背景之上但比其他元素低 */
  background-color: rgba(255, 0, 0, 0.5);
  height: 100px;
  width: 100px;
}

.normal-flow {
  background-color: rgba(0, 0, 255, 0.5);
  height: 100px;
  width: 100px;
  /* 按照文档顺序，普通块级元素 */
}

.floated {
  float: right;
  background-color: rgba(0, 255, 0, 0.5);
  height: 100px;
  width: 100px;
  /* 浮动元素会覆盖在正常文档流中的元素上 */
}

.positioned {
  position: relative;
  background-color: rgba(255, 255, 0, 0.5);
  height: 100px;
  width: 100px;
  z-index: auto; /* 定位元素，但没有指定 z-index */
}

.positive-zindex {
  position: relative;
  background-color: rgba(255, 0, 255, 0.5);
  height: 100px;
  width: 100px;
  z-index: 1; /* 正 z-index，位于所有其他元素之上 */
}