一、当z-index“失灵”时，到底发生了什么？

你是否曾经遇到过这样的尴尬情况：明明给一个元素设置了很大的z-index值，比如9999，满心以为它能稳稳地盖在所有东西上面，结果它却像个害羞的孩子，躲在其他元素后面不肯出来。你检查了代码，没有拼写错误，值也足够大，但问题依旧。这时候，你很可能不是遇到了“bug”，而是撞上了CSS中一个强大但有点隐秘的规则——层叠上下文。

我们可以把整个网页想象成一个立体的空间。默认情况下，所有元素都躺在一个平面上（我们称之为“文档流”）。当你给元素设置z-index时，你是在尝试命令它：“喂，你，站到前面（或后面）来！” 但问题是，这个命令并非总是全局有效的。如果这个元素被关在了一个特殊的“玻璃房”里，那么它只能在“玻璃房”内部调整自己的前后顺序，却无法影响“玻璃房”外面其他元素的前后关系。

这个“玻璃房”，就是层叠上下文。每个层叠上下文都是一个独立的立体空间，它内部的z-index值只在这个空间内部比较，对外隔绝。而创建这个“玻璃房”的，往往就是你无意中给元素设置的一些CSS属性。理解哪些属性会创建这样一个上下文，是解决z-index失效问题的关键第一步。

二、谁在悄悄创建“层叠上下文”？

不是只有z-index才能决定谁前谁后。实际上，很多常见的CSS属性都会默默地创建一个新的层叠上下文，这常常是问题的根源。了解它们，就像拿到了打开谜题的钥匙。

以下是一些最常见的“创建者”：

  1. 根元素：整个页面的<html>标签本身就是一个最顶层的层叠上下文。
  2. 定位元素且z-index不为auto：这是一个经典组合。一个设置了position为relative, absolute, fixed或sticky的元素，并且你明确给了它一个数字值的z-index（哪怕只是0），它就会创建一个新的层叠上下文。
  3. Flex或Grid容器的子项：当元素是一个Flexbox或CSS Grid布局的子项，并且它的z-index不是auto时，它也会创建自己的层叠上下文。这是现代布局中一个非常常见的陷阱。
  4. 某些特殊属性：例如 opacity 值小于1的元素、transform 值不是 none 的元素、filter 值不是 none 的元素等。这些属性本意是为了实现视觉效果，但副作用就是会创建新的层叠上下文。

让我们通过一个具体的技术栈示例来直观感受一下。下面的所有示例都将统一使用 纯HTML/CSS (无框架) 技术栈。

<!-- 技术栈：纯HTML/CSS -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>
        .box {
            width: 200px;
            height: 200px;
            position: absolute; /* 开启定位 */
        }
        .parent {
            background-color: lightblue;
            top: 50px;
            left: 50px;
            /* 注意：parent没有设置z-index，不会创建新的层叠上下文 */
        }
        .child {
            background-color: rgba(255, 100, 100, 0.8); /* 半透明红色 */
            top: 100px;
            left: 100px;
            z-index: 100; /* 设置了很大的z-index */
        }
        .sibling {
            background-color: lightgreen;
            top: 120px;
            left: 80px;
            z-index: 1; /* z-index比child小很多 */
        }
    </style>
</head>
<body>
    <div class="box parent">
        父元素（蓝色）
        <div class="box child">子元素（红色，z-index:100）</div>
    </div>
    <div class="box sibling">兄弟元素（绿色，z-index:1）</div>
</body>
</html>

在这个例子中，你可能会预期红色的.child元素（z-index:100）会盖在绿色的.sibling元素（z-index:1）上面，因为100远大于1。但实际效果却是绿色的盖住了红色的。为什么？因为.child的父元素.parent虽然定位了，但没有设置z-index，所以它没有创建新的层叠上下文。于是，.child和.sibling实际上处于同一个层叠上下文（根上下文）中，它们的z-index可以直接比较，.child应该在前。但我们忽略了另一个因素：绘制顺序。在同一个层叠上下文中，后出现在HTML结构里的元素，默认会绘制在先出现的元素之上。这里.sibling在DOM中位于.parent之后，所以即使z-index小，它还是盖住了.parent里面的所有内容，包括.child。

三、深入剖析：层叠上下文的堆叠规则

现在我们知道有哪些“玻璃房”了，那这些“玻璃房”之间，以及“玻璃房”内部的东西，到底谁在上谁在下呢？CSS有一套明确的层叠等级规则。我们可以把一个层叠上下文内部从下到上分成7层：

  1. 底层：形成该上下文的元素（“玻璃房”的地板墙壁）。
  2. 负z-index层：z-index为负数的子元素。
  3. 块级盒层：常规文档流中的块级元素。
  4. 浮动盒层：浮动元素。
  5. 行内盒层：常规文档流中的行内/行内块元素。
  6. 定位层：z-index: auto或0的定位元素。
  7. 顶层：z-index为正数的子元素。

关键在于比较：当两个元素属于不同的层叠上下文时，它们的z-index值大小比较就失效了。这时，需要比较它们各自所属的“玻璃房”（层叠上下文）的层级高低。而一个层叠上下文的层级，又由创建它的元素在它自己的父层叠上下文中的位置决定。

让我们看一个更复杂的例子，演示父级创建上下文后子级z-index被“困住”的情况：

<!-- 技术栈：纯HTML/CSS -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>
        .container {
            position: relative;
            z-index: 0; /* 关键！这行代码让.container创建了一个新的层叠上下文 */
            width: 300px;
            height: 300px;
            background-color: #eee;
        }
        .modal {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 200px;
            height: 200px;
            background-color: lightcoral;
            z-index: 1000; /* 这个值很大，但只在.container内部有效 */
        }
        .global-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 100; /* 这个值比1000小，但却能盖住modal */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="modal">我是弹窗，z-index:1000</div>
    </div>
    <div class="global-overlay">我是全局遮罩，z-index:100</div>
    <p>你会发现，尽管弹窗的z-index(1000)比遮罩的(100)大，但遮罩还是盖住了弹窗。因为弹窗被“困”在了.container创建的层叠上下文中。</p>
</body>
</html>

这个例子是开发中非常典型的场景。.container因为position: relative和z-index: 0创建了一个新的层叠上下文。其子元素.modal的z-index:1000再大，也只在.container这个“玻璃房”里称王称霸。而.global-overlay位于根上下文中。现在，我们比较的是根上下文下的.global-overlay 和 根上下文下的.container 的层级。.container的z-index是0，.global-overlay是100，所以.global-overlay这个“玻璃房”整体就比.container这个“玻璃房”层级高，因此它里面的所有内容（这里就是它自己）都会盖在.container及其内部所有内容之上。

四、实战：如何让z-index真正生效？

知道了原理，解决问题就有了方向。核心思路就是：确保你想要控制层叠关系的元素，处于同一个层叠上下文中。通常有两种策略：

策略一：提升“玻璃房”的层级 如果想让被“困住”的子元素出来，最直接的办法是提升其所在“玻璃房”（父层叠上下文）的层级。

<!-- 技术栈：纯HTML/CSS -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>
        /* 沿用上一个例子的HTML结构，只修改CSS */
        .container {
            position: relative;
            /* 移除或注释掉 z-index: 0; */
            /* 这样.container就不会创建强力的新上下文，.modal将回归根上下文 */
            width: 300px;
            height: 300px;
            background-color: #eee;
        }
        .modal {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 200px;
            height: 200px;
            background-color: lightcoral;
            z-index: 1000;
        }
        .global-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 100;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="modal">我是弹窗，z-index:1000</div>
    </div>
    <div class="global-overlay">我是全局遮罩，z-index:100</div>
    <p>现在，.modal和.global-overlay都在根上下文中，1000 > 100，所以弹窗成功显示在遮罩之上。</p>
</body>
</html>

策略二：调整元素到同一上下文 如果无法改变父元素的属性，可以考虑调整DOM结构，将需要比较的元素变成兄弟关系，并放在一个共同的、不会乱创建上下文的父元素里。

关联技术：使用CSS自定义属性管理z-index 在大型项目中，随意设置z-index值（比如9999）会导致难以维护的“z-index战争”。一个最佳实践是使用CSS自定义属性来定义一套清晰的层级系统。

<!-- 技术栈：纯HTML/CSS -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>
        :root {
            /* 定义一套清晰的z-index尺度 */
            --z-index-dropdown: 100;
            --z-index-sticky: 200;
            --z-index-modal-backdrop: 300;
            --z-index-modal: 400;
            --z-index-popover: 500;
            --z-index-tooltip: 600;
        }
        .modal-backdrop {
            position: fixed;
            z-index: var(--z-index-modal-backdrop);
            /* ... 其他样式 */
        }
        .modal-content {
            position: fixed;
            z-index: var(--z-index-modal);
            /* 确保.modal-content和.modal-backdrop的父元素不会创建意外上下文 */
            /* ... 其他样式 */
        }
        .tooltip {
            position: absolute;
            z-index: var(--z-index-tooltip);
            /* ... 其他样式 */
        }
    </style>
</head>
<body>
    <!-- 通过变量名而非具体数字，代码意图更清晰，维护更方便 -->
</body>
</html>

五、全面总结：应用、优劣与避坑指南

应用场景

  1. 模态框与遮罩：这是最经典的应用，必须确保模态框内容在遮罩之上。
  2. 导航下拉菜单：下拉菜单需要覆盖页面上的其他内容。
  3. 悬浮按钮或工具提示：这些小组件需要始终可见。
  4. 复杂动画与重叠UI：在实现卡片翻转、多步骤引导等复杂交互时，精确控制层级至关重要。

技术优缺点

  • 优点：z-index配合层叠上下文的概念，提供了强大的、基于代码逻辑的视觉层级控制能力，是实现丰富UI层叠效果的基石。
  • 缺点：规则相对隐晦，容易因其他CSS属性（如opacity, transform）的副作用而产生非预期的层叠上下文，导致调试困难。过度依赖巨大的z-index值会使代码难以维护。

注意事项

  1. 检查父元素：当z-index不生效时，第一反应应该是检查目标元素的所有父级元素，看是否有元素无意中创建了新的层叠上下文。重点关注position+z-index、opacity、transform、filter等属性。
  2. 避免“z-index战争”：不要随意使用9999这样的值。应该像上面示例那样，使用CSS变量或Sass/Less变量定义一套有语义的、有限的层级系统。
  3. 理解默认顺序：记住，在同一个层叠上下文中，当z-index相同时，后出现的元素会盖住先出现的元素。
  4. 善用开发者工具：现代浏览器（如Chrome DevTools）的Elements面板中，可以清晰地看到元素是否创建了层叠上下文（通常会有提示），并且可以临时修改z-index值进行调试。

文章总结 z-index失效问题，十之八九是层叠上下文在“作怪”。它不是一个bug，而是CSS设计中的一个核心特性，用于管理复杂的立体堆叠关系。解决这类问题的关键在于建立“玻璃房”思维模型：识别出哪些属性会创建独立的层叠上下文（“玻璃房”），并理解不同“玻璃房”之间以及“玻璃房”内部如何比较层级。通过将需要比较的元素置于同一上下文中，或者调整其所在上下文的层级，就能精准地控制谁上谁下。结合良好的工程实践，如用变量管理z-index尺度，可以让你在应对UI层叠问题时更加得心应手，写出更健壮、更易维护的CSS代码。记住，下次再遇到z-index不听话，别光盯着它自己，往上看看它的“家长”们吧。