CSS 中 z-index 失效的原因及其解决办法

z-index 是 CSS 中一个强大的属性，允许我们控制元素的堆叠顺序，将某些元素放在其他元素的前面或后面。然而，有时 z-index 似乎不起作用，导致元素的堆叠顺序混乱。本文将探讨 z-index 失效的原因以及如何使用层叠上下文和块级格式化上下文 (BFC) 来解决此问题。

**z-index 如何工作** 

z-index 是一个整数属性，决定元素在页面上的堆叠顺序。z-index 值较高的元素将位于 z-index 值较低的元素之上。如果两个元素具有相同的 z-index，则后创建的元素将位于前面。

**z-index 失效的原因** 

z-index 在某些情况下可能不起作用，原因如下：

* **未设置层叠上下文：** 层叠上下文是一个包含元素的独立堆叠上下文，元素的 z-index 只在该上下文中有效。如果没有建立层叠上下文，z-index 可能会被父元素或其他同级元素覆盖。
* **位置属性为 static：** 具有 static 定位的元素不受 z-index 的影响，始终位于文档流中其自然的位置。
* **元素被定位到页面外部：** 如果一个元素被定位到页面外部（例如，使用 position: absolute 或 position: fixed），它将脱离文档流并不受 z-index 的影响。

**使用层叠上下文解决 z-index 失效问题** 

层叠上下文是一个包含元素的独立堆叠上下文，在该上下文中，元素的 z-index 相对彼此有效。可以通过以下方式创建层叠上下文：

* position: absolute、position: fixed 或 position: sticky
* overflow: hidden 或 overflow: scroll
* opacity: less than 1
* transform: translateZ(0)

**使用块级格式化上下文 (BFC) 解决 z-index 失效问题** 

BFC 是一个元素，强制浏览器将其内容作为独立的单元进行格式化，不受周围元素的影响。元素可以创建 BFC 的情况包括：

* 浮动元素（float: left 或 float: right）
* 绝对定位元素（position: absolute 或 position: fixed）
* 块级元素（display: block）
* overflow: hidden 或 overflow: scroll
* table 元素

BFC 的一个关键特性是它建立了一个新的层叠上下文，在该上下文中，元素的 z-index 相对彼此有效。因此，如果将 z-index 设置为高值的元素放在一个 BFC 中，它将始终位于该 BFC 外部的其他元素之上。

**示例** 

以下示例演示了如何使用层叠上下文和 BFC 来确保元素的正确堆叠顺序：

```css
.container {
  position: relative;
  z-index: 1;
}

.child1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 2;
}

.child2 {
  display: block;
  width: 100px;
  height: 100px;
  background-color: blue;
  z-index: 3;
}

在这个示例中，.container 元素是一个层叠上下文，因为它的 position 属性设置为 relative。.child1 元素是一个绝对定位的元素，因此它位于 .container 的堆叠顺序之上，尽管它的 z-index 为 2。.child2 元素是一个块级元素，因此它创建了一个 BFC。由于 .child2 的 z-index 为 3，它位于 .container 和 .child1 之上。

结论

通过了解 z-index 如何工作以及造成其失效的原因，我们可以使用层叠上下文和 BFC 来解决此问题并确保元素的正确堆叠顺序。通过仔细设置这些属性，我们可以创建视觉上令人愉悦且符合预期堆叠顺序的网站。