CSS 层叠上下文总结

什么是 CSS 层叠上下文？

CSS 层叠上下文是 HTML 元素在三维空间（Z 轴）上进行层叠排列的一种机制。当你给某些 CSS 属性设置了特定值时，浏览器会为该元素创建一个新的"层叠上下文"。这个上下文就像一个独立的图层，它内部的元素会按照特定的规则进行堆叠，而整个上下文作为一个整体，也会参与到其父级层叠上下文的堆叠顺序中。

可以把它想象成 Photoshop 中的图层组：图层组本身有它在整个图层面板中的顺序，而组内的图层也有它们在组内的顺序。

关键点：

Z 轴： 层叠上下文主要处理元素在垂直于屏幕（或页面）方向上的堆叠顺序。
独立空间： 每个层叠上下文都是一个独立的堆叠环境。
层级性： 层叠上下文可以嵌套。父级上下文决定了子级上下文（作为一个整体）的堆叠层级。
z-index 的作用域： z-index 属性的值只在同一个层叠上下文 内有比较意义。不同层叠上下文中的元素，即使 z-index 值很大，也可能被另一个层叠上下文中 z-index 值较小的元素（但其所在的上下文层级更高）覆盖。

如何创建层叠上下文？

以下情况会创建新的层叠上下文：

根元素 (<html>) ：文档的根元素天生就创建了一个根层叠上下文。
position 为 absolute 或 relative 且 z-index 值不为 auto ：这是最常见的创建方式。position: static（默认值）不会创建。
position 为 fixed 或 sticky ：这两个定位值总是会创建新的层叠上下文，无论 z-index 是多少（包括 auto）。
opacity 属性值小于 1 ：例如 opacity: 0.9;。
transform 属性值不为 none ：例如 transform: scale(1.1); 或 transform: translateZ(0);。
filter 属性值不为 none ：例如 filter: blur(5px);。
perspective 属性值不为 none ：例如 perspective: 1000px;。
clip-path 属性值不为 none。
mask / mask-image / mask-border 属性值不为 none。
isolation 属性值为 isolate：这是显式创建层叠上下文的推荐方式，语义清晰。
mix-blend-mode 属性值不为 normal。
-webkit-overflow-scrolling 属性值为 touch（一个主要用于移动端的属性）。
will-change 指定了任何会创建层叠上下文的属性（即使该属性当前值为初始值，但 will-change 暗示了它可能会变）。
contain 属性值为 layout、paint 或包含它们的值（如 strict, content） 。
父元素为 display: flex 或 display: grid，且子元素的 z-index 值不为 auto。

注意： 随着 CSS 标准的发展，触发层叠上下文的条件可能会增加。

层叠顺序（Stacking Order）

在同一个层叠上下文内，元素的绘制（堆叠）顺序遵循以下规则（从后到前）：

背景和边框（Background and Borders） ：形成该层叠上下文的元素的背景和边框。
负 z-index 的子层叠上下文（Negative z-index Child Contexts） ：z-index 为负数的子级层叠上下文，值越小越靠后。
块级非定位后代（In-flow, Non-positioned, Block-level Descendants） ：文档流内、position 为 static 的块级元素（如 div, p）。
非定位浮动后代（Non-positioned Floats） ：position 为 static 的浮动元素 (float: left/right)。
行内非定位后代（In-flow, Non-positioned, Inline-level Descendants） ：文档流内、position 为 static 的行内级元素（如 span, 文本内容）。
z-index 为 auto 或 0 的子层叠上下文及定位子元素（z-index: auto/0 Child Contexts and Positioned Elements） ：
- position 不为 static 且 z-index 为 auto 的元素。
- z-index 为 0 或 auto 的子级层叠上下文。
- 它们会按照在 HTML 中出现的顺序堆叠。
正 z-index 的子层叠上下文（Positive z-index Child Contexts） ：z-index 为正数的子级层叠上下文，值越大越靠前。

核心规则记忆：

先画爹（上下文元素的背景边框）。
再画儿子们：负 Z -> 普通块 -> 浮动 -> 普通行内 -> 默认 Z/无 Z 定位 -> 正 Z。
z-index 只在同级（同一上下文内）比较才有意义。

层叠上下文的特性总结

原子性：一旦形成层叠上下文，它内部的元素堆叠顺序就基本确定了。这个上下文作为一个整体参与外部的堆叠。
局部性 ：z-index 的比较只发生在同一层叠上下文内部的同级元素之间。
隔离性 ：层叠上下文可以限制其内部元素的 z-index 影响范围，使其无法"穿透"到外部上下文的其他元素之上（除非该上下文本身层级就很高）。

使用场景示例

模态框（Modal/Dialog） ：确保模态框及其遮罩层显示在页面所有其他内容的上方。通常会给模态框容器设置 position: fixed 和较高的 z-index。
下拉菜单（Dropdown Menu） ：鼠标悬停或点击时出现的菜单需要显示在触发元素和其他邻近元素的上方。需要给菜单容器设置 position: absolute 和合适的 z-index。
提示框（Tooltip） ：类似下拉菜单，提示信息需要覆盖在关联元素的上方。
固定头部/侧边栏（Fixed Header/Sidebar） ：使用 position: fixed 或 position: sticky 创建的导航栏或侧边栏，需要确保它们在页面滚动时始终可见并位于内容之上。
复杂的 UI 布局重叠：在仪表盘、可视化图表等界面中，可能需要精确控制多个重叠组件的显示顺序。
解决 z-index 失效问题 ：最常见的问题是，一个元素的 z-index 设置得很高，但仍然被另一个 z-index 较低（甚至没有设置）的元素覆盖。这几乎总是因为这两个元素不在同一个层叠上下文，而高 z-index 元素的父级（或祖先级）创建了一个层叠上下文，且这个上下文的层级较低。

详细代码讲解

下面通过几个示例来深入理解层叠上下文。

准备工作：基础 HTML 和 CSS (用于所有示例)

HTML

xml 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 层叠上下文示例</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        /* 通用重置和辅助样式 */
        body {
            font-family: sans-serif;
            line-height: 1.6;
            margin: 20px;
            padding-bottom: 200px; /* 保证有滚动空间 */
        }
        h1, h2, h3 {
            margin-top: 1.5em;
            margin-bottom: 0.5em;
            border-bottom: 1px solid #ccc;
            padding-bottom: 0.3em;
        }
        code {
            background-color: #f0f0f0;
            padding: 0.2em 0.4em;
            border-radius: 3px;
            font-family: monospace;
        }
        .container {
            border: 2px dashed #999;
            padding: 20px;
            margin-bottom: 20px;
            position: relative; /* 为了方便子元素定位 */
        }
        .box {
            width: 100px;
            height: 100px;
            padding: 10px;
            margin: 5px;
            border: 1px solid #333;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            text-align: center;
            color: white;
        }
        .info {
            background-color: rgba(0, 0, 0, 0.05);
            padding: 10px;
            margin-top: 10px;
            border-left: 3px solid #007bff;
            font-size: 0.9em;
        }

        /* 特定颜色 */
        .red { background-color: rgba(255, 0, 0, 0.8); }
        .green { background-color: rgba(0, 128, 0, 0.8); }
        .blue { background-color: rgba(0, 0, 255, 0.8); }
        .yellow { background-color: rgba(255, 255, 0, 0.8); color: #333; }
        .purple { background-color: rgba(128, 0, 128, 0.8); }
        .orange { background-color: rgba(255, 165, 0, 0.8); }
        .grey { background-color: rgba(128, 128, 128, 0.8); }

        /* 定位样式 */
        .relative { position: relative; }
        .absolute { position: absolute; }
        .fixed { position: fixed; }
        .sticky { position: sticky; top: 10px; /* sticky 需要 top/bottom/left/right */ }

        /* z-index 辅助类 */
        .z-neg-1 { z-index: -1; }
        .z-0 { z-index: 0; }
        .z-1 { z-index: 1; }
        .z-2 { z-index: 2; }
        .z-10 { z-index: 10; }
        .z-100 { z-index: 100; }
        .z-auto { z-index: auto; } /* 默认值 */

        /* 其他触发上下文的属性 */
        .opacity-low { opacity: 0.9; }
        .transform-on { transform: translateX(10px); }
        .filter-on { filter: brightness(1.1); }
        .isolate { isolation: isolate; }

    </style>
</head>
<body>
    <h1>CSS 层叠上下文 (Stacking Context) 详解</h1>

    </body>
</html>

示例 1: z-index 只对定位元素有效

这个示例展示 z-index 对非定位元素（position: static）无效，以及 position: relative 但 z-index: auto 的情况。

HTML

xml 复制代码

<div class="container">
    <h2>示例 1: z-index 与定位</h2>
    <div class="box red" style="width: 120px; height: 120px;">Box 1 (static, z-index: 10)<br>实际无效</div>
    <div class="box green" style="width: 120px; height: 120px; margin-top: -50px; margin-left: 30px;">Box 2 (static)</div>
    <div class="box blue relative z-auto" style="width: 120px; height: 120px; margin-top: -50px; margin-left: 60px;">Box 3 (relative, z-auto)<br>默认堆叠</div>
    <div class="box yellow relative z-1" style="width: 120px; height: 120px; margin-top: -50px; margin-left: 90px;">Box 4 (relative, z-1)<br>会上浮</div>

    <style>
        /* 仅示例 1 需要的特殊样式 */
        .container:nth-of-type(1) .red { z-index: 10; /* 对 static 无效 */ }
    </style>

    <div class="info">
        <strong>说明：</strong><br>
        - Box 1 (红色) 虽然设置了 <code>z-index: 10</code>，但因为是 <code>position: static</code> (默认值)，<code>z-index</code> 不生效。它的堆叠顺序由 HTML 源码顺序决定。<br>
        - Box 2 (绿色) 是 <code>static</code>，按源码顺序堆叠在 Box 1 下方（视觉上由于负 margin 会重叠）。<br>
        - Box 3 (蓝色) 是 <code>position: relative</code> 但 <code>z-index: auto</code>。它参与层叠，但其堆叠层级等同于普通流内元素。在层叠顺序中，它位于普通块级元素之后，但在正 <code>z-index</code> 元素之前。它覆盖了 Box 1 和 Box 2 (因为它们是普通流元素，且 Box 3 在源码中靠后)。<br>
        - Box 4 (黄色) 是 <code>position: relative</code> 且 <code>z-index: 1</code>。它创建了一个新的层叠上下文（虽然在本例中不明显），并且由于其正 <code>z-index</code> 值，它会堆叠在 Box 1, 2, 3 之上。
    </div>
</div>

预期结果 1: 黄色盒子 (Box 4) 在最上面，覆盖蓝色 (Box 3)，蓝色覆盖绿色 (Box 2)，绿色覆盖红色 (Box 1)。红色盒子的 z-index: 10 被忽略。

示例 2: 创建层叠上下文 (position + z-index)

演示 position: relative/absolute 配合非 auto 的 z-index 如何创建层叠上下文。

HTML

xml 复制代码

<div class="container">
    <h2>示例 2: 创建层叠上下文 (position + z-index)</h2>
    <div class="box grey relative z-1" style="width: 200px; height: 150px;">
        Parent 1 (relative, z-index: 1) - 创建层叠上下文
        <div class="box red absolute z-100" style="top: 20px; left: 20px;">Child 1.1 (absolute, z-100)</div>
        <div class="box green absolute z-10" style="top: 40px; left: 40px;">Child 1.2 (absolute, z-10)</div>
    </div>

    <div class="box orange relative z-2" style="width: 200px; height: 150px; margin-top: -100px; margin-left: 100px;">
        Parent 2 (relative, z-index: 2) - 创建层叠上下文
        <div class="box blue absolute z-1" style="top: 20px; left: 20px;">Child 2.1 (absolute, z-1)</div>
        <div class="box purple absolute z--1" style="top: 40px; left: 40px;">Child 2.2 (absolute, z--1)</div>
    </div>

    <style>
        /* 仅示例 2 需要的特殊样式 */
        /* 增加一点透明度以便观察堆叠 */
        .container:nth-of-type(2) .box { opacity: 0.9; }
    </style>

    <div class="info">
        <strong>说明：</strong><br>
        - Parent 1 (灰色) 和 Parent 2 (橙色) 都通过 <code>position: relative</code> 和非 <code>auto</code> 的 <code>z-index</code> 创建了新的层叠上下文。<br>
        - 在根层叠上下文中（或者说示例 2 的 <code>.container</code> 的上下文），Parent 2 (<code>z-index: 2</code>) 会覆盖 Parent 1 (<code>z-index: 1</code>)。<br>
        - <strong>关键点：</strong> Child 1.1 (红色) 即使有非常高的 <code>z-index: 100</code>，它也**无法**覆盖 Parent 2 或其任何子元素 (Child 2.1, Child 2.2)。因为 Child 1.1 的 <code>z-index</code> 只在 Parent 1 这个层叠上下文内部有效，而 Parent 1 作为一个整体，层级低于 Parent 2。<br>
        - Child 2.1 (蓝色, <code>z-index: 1</code>) 和 Child 2.2 (紫色, <code>z-index: -1</code>) 的 <code>z-index</code> 只在 Parent 2 的层叠上下文内比较。因此，蓝色会覆盖紫色，且它们都会覆盖 Parent 2 的背景。Child 2.2 因为是负 z-index，理论上会被 Parent 2 内的普通流内容覆盖（如果 Parent 2 里有的话）。
    </div>
</div>

预期结果 2: 橙色盒子 (Parent 2) 整体覆盖在灰色盒子 (Parent 1) 之上。红色盒子 (Child 1.1, z=100) 尽管 z-index 很高，但被限制在灰色盒子内部，并且被整个橙色盒子（及其内部所有内容）覆盖。在橙色盒子内部，蓝色盒子 (Child 2.1, z=1) 覆盖紫色盒子 (Child 2.2, z=-1)。

示例 3: 嵌套层叠上下文与 z-index 局部性

进一步强化 z-index 的作用域是局部的概念。

HTML

xml 复制代码

<div class="container">
    <h2>示例 3: 嵌套层叠上下文与 z-index 局部性</h2>

    <div class="box grey relative z-1" style="width: 300px; height: 200px;">
        Level 1 Context (z-index: 1)
        <div class="box red relative z-100" style="width: 150px; height: 150px; top: 20px; left: 20px;">
            Level 2 Context (z-index: 100)
            <div class="box yellow absolute z-1000" style="top: 10px; left: 10px;">
                Level 3 Element (z-index: 1000)
            </div>
        </div>
    </div>

    <div class="box blue relative z-2" style="width: 150px; height: 150px; margin-top: -150px; margin-left: 100px;">
        Level 1 Context (z-index: 2)
        <div class="box green absolute z-1" style="top: 10px; left: 10px;">
            Level 2 Element (z-index: 1)
        </div>
    </div>

    <style>
        /* 仅示例 3 需要的特殊样式 */
        .container:nth-of-type(3) .box { font-size: 12px; }
    </style>

    <div class="info">
        <strong>说明：</strong><br>
        - 灰色盒子 (Level 1, z=1) 和蓝色盒子 (Level 1, z=2) 在同一个父级（这里是 <code>.container</code>，但由于 <code>.container</code> 未创建新上下文，它们实际上在根上下文或 body 的上下文中比较）比较 <code>z-index</code>。蓝色 (z=2) 覆盖灰色 (z=1)。<br>
        - 红色盒子 (Level 2, z=100) 在灰色盒子内部，它的 <code>z-index: 100</code> 只与灰色盒子内的其他定位元素（如果有的话）比较。它创建了新的层叠上下文。<br>
        - 黄色盒子 (Level 3, z=1000) 在红色盒子内部，它的 <code>z-index: 1000</code> 只与红色盒子内的其他定位元素比较。<br>
        - 绿色盒子 (Level 2, z=1) 在蓝色盒子内部，它的 <code>z-index: 1</code> 只与蓝色盒子内的其他定位元素比较。<br>
        - <strong>核心结论：</strong> 尽管黄色盒子有极高的 <code>z-index: 1000</code>，但因为它所在的顶级上下文（灰色盒子）的 <code>z-index</code> (1) 低于蓝色盒子 (z=2)，所以黄色盒子（以及它所在的红色和灰色盒子）整体都会被蓝色盒子（以及它内部的绿色盒子）覆盖。
    </div>
</div>

预期结果 3: 蓝色盒子 (z=2) 及其内部的绿色盒子 (z=1)，整体覆盖在灰色盒子 (z=1) 及其内部的红色 (z=100) 和黄色 (z=1000) 盒子之上。黄色盒子的 z-index: 1000 无法使其"突破"其祖先层叠上下文（灰色盒子）的限制。

示例 4: 其他触发器 (opacity, transform, filter)

演示 opacity, transform, filter 等属性如何隐式地创建层叠上下文，可能导致意外的堆叠行为。

HTML

xml 复制代码

<div class="container">
    <h2>示例 4: 其他触发器 (opacity, transform, filter)</h2>

    <div class="box red relative z-10" style="top: 0; left: 0;">
        Box A (relative, z-index: 10)
    </div>

    <div class="box green opacity-low" style="width: 150px; height: 150px; margin-top: -50px; margin-left: 30px;">
        Box B (opacity: 0.9) - 创建新上下文 (层级=0)
        <div class="box yellow absolute z-100" style="top: 10px; left: 10px;">
            Child B.1 (absolute, z-100)<br>被 Box A 覆盖!
        </div>
    </div>

    <div class="box blue transform-on" style="width: 150px; height: 150px; margin-top: -50px; margin-left: 180px;">
        Box C (transform: ...) - 创建新上下文 (层级=0)
        <div class="box purple absolute z-100" style="top: 10px; left: 10px;">
            Child C.1 (absolute, z-100)<br>被 Box A 覆盖!
        </div>
    </div>

     <div class="box orange filter-on" style="width: 150px; height: 150px; margin-top: -50px; margin-left: 330px;">
        Box D (filter: ...) - 创建新上下文 (层级=0)
        <div class="box grey absolute z-100" style="top: 10px; left: 10px;">
            Child D.1 (absolute, z-100)<br>被 Box A 覆盖!
        </div>
    </div>

    <style>
        /* 仅示例 4 需要的特殊样式 */
        .container:nth-of-type(4) .box { font-size: 12px; }
        .container:nth-of-type(4) .opacity-low,
        .container:nth-of-type(4) .transform-on,
        .container:nth-of-type(4) .filter-on {
            /* 这些元素本身没有设置 z-index，或 position 不是 always-creating 类型 */
            /* 但 opacity/transform/filter 让它们创建了层叠上下文 */
            /* 这个新上下文的层级表现得像 z-index: auto 或 0 */
        }
    </style>

    <div class="info">
        <strong>说明：</strong><br>
        - Box A (红色) 是 <code>position: relative</code> 且 <code>z-index: 10</code>，它创建了一个层叠上下文，并且层级较高。<br>
        - Box B (绿色), Box C (蓝色), Box D (橙色) 分别因为设置了 <code>opacity</code>, <code>transform</code>, <code>filter</code> 而**自动创建了新的层叠上下文**。由于它们本身没有设置 <code>z-index</code> (或者即使设置了，如果它们不是定位元素，z-index 也可能不直接参与外部比较），这些新创建的层叠上下文的堆叠层级相当于 <code>z-index: auto</code> 或 <code>z-index: 0</code>。<br>
        - 根据层叠规则，<code>z-index</code> 为正数的层叠上下文 (Box A, z=10) 会覆盖 <code>z-index</code> 为 <code>auto</code> 或 <code>0</code> 的层叠上下文 (Box B, C, D)。<br>
        - 因此，尽管 Box B, C, D 内部的子元素 (黄色、紫色、灰色) 有很高的 <code>z-index: 100</code>，但它们被限制在各自父级（B, C, D）创建的低层级上下文中，所以它们**全都会被 Box A (红色) 覆盖**。<br>
        - 这就是常见的 "z-index 失效" 陷阱：父元素不经意间（通过 opacity, transform 等）创建了层叠上下文，限制了子元素 z-index 的作用范围。
    </div>
</div>

预期结果 4: 红色盒子 (Box A, z=10) 会覆盖绿色 (Box B)、蓝色 (Box C)、橙色 (Box D) 盒子及其所有子元素。黄色、紫色、灰色盒子尽管 z-index 很高，但因为它们的父级（B, C, D）因 opacity/transform/filter 创建了层级较低（相当于 z=0）的层叠上下文，导致它们无法超越红色盒子。

示例 5: isolation: isolate 显式创建上下文

使用 isolation: isolate 来明确地创建一个层叠上下文，而不需要依赖 position+z-index 或其他副作用。

HTML

xml 复制代码

<div class="container">
    <h2>示例 5: isolation: isolate</h2>

    <div class="box red isolate" style="width: 200px; height: 150px;">
        Parent 1 (isolation: isolate) - 创建层叠上下文 (层级=0)
        <div class="box green absolute z-10" style="top: 20px; left: 20px;">Child 1.1 (z=10)</div>
        <div class="box blue absolute z--1" style="top: 40px; left: 40px;">Child 1.2 (z=-1)</div>
    </div>

    <div class="box yellow relative z-1" style="width: 150px; height: 100px; margin-top: -100px; margin-left: 100px;">
        Parent 2 (relative, z=1) - 创建层叠上下文 (层级=1)
    </div>

    <style>
         /* 仅示例 5 需要的特殊样式 */
        .container:nth-of-type(5) .box { opacity: 0.9; font-size: 12px; }
    </style>

    <div class="info">
        <strong>说明：</strong><br>
        - Parent 1 (红色) 使用 <code>isolation: isolate;</code> 创建了一个新的层叠上下文。由于它没有设置 <code>z-index</code> 并且不是特殊定位（如 fixed/sticky），这个上下文的层级表现为 <code>z-index: auto</code> 或 <code>0</code>。<br>
        - Parent 2 (黄色) 使用 <code>position: relative; z-index: 1;</code> 创建了一个层叠上下文，层级为 1。<br>
        - 因此，Parent 2 (黄色) 会覆盖 Parent 1 (红色) 及其所有内容。<br>
        - 在 Parent 1 内部，Child 1.1 (绿色, z=10) 覆盖 Child 1.2 (蓝色, z=-1)，因为它们的 <code>z-index</code> 在 Parent 1 的上下文内比较。<br>
        - 使用 <code>isolation: isolate</code> 的好处是意图明确，它只做创建层叠上下文这一件事，不会像 <code>opacity</code> 或 <code>transform</code> 那样带来额外的视觉效果或布局副作用（除非那些效果是你想要的）。
    </div>
</div>

预期结果 5: 黄色盒子 (Parent 2, z=1) 覆盖红色盒子 (Parent 1, isolation 创建了 z=0 的上下文) 及其内部的绿色和蓝色子盒子。

示例 6: 实际场景 - 模态框 (Modal)

模拟一个简单的模态框，展示如何利用层叠上下文确保其显示在最上层。

HTML

xml 复制代码

<div class="container">
    <h2>示例 6: 实际场景 - 模态框 (Modal)</h2>

    <div class="page-content" style="height: 150px; background: #eee; padding: 10px; border: 1px solid #ccc;">
        <p>这里是页面的一些普通内容...</p>
        <button onclick="document.getElementById('myModal').style.display='block'">打开模态框</button>
        <div class="box red relative z-1" style="width: 80px; height: 50px; float: right;">页面上的一个定位元素 (z=1)</div>
        <p>更多内容...</p>
    </div>

    <div id="myModal" class="modal-overlay">
        <div class="modal-content">
            <h3>模态框标题</h3>
            <p>这是模态框的内容。它应该在页面所有内容的上方。</p>
            <button onclick="document.getElementById('myModal').style.display='none'">关闭</button>
        </div>
    </div>

    <style>
        /* 模态框样式 */
        .modal-overlay {
            display: none; /* 默认隐藏 */
            position: fixed; /* 固定定位，相对于视口 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* 半透明遮罩层 */
            z-index: 1000; /* 非常高的 z-index，确保遮罩层在最上 */
            /* position: fixed 总是创建层叠上下文 */
        }
        .modal-content {
            position: absolute; /* 相对于 overlay 定位 */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* 居中显示 */
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            width: 80%;
            max-width: 500px;
            /* modal-content 不需要 z-index，因为它在 modal-overlay 的层叠上下文内，
               并且 modal-overlay 已经很高了。
               如果需要 content 内有更复杂的堆叠，可以给 content 也设置 position 和 z-index
               来创建它自己的上下文。*/
            /* 增加 transform 也会创建层叠上下文 */
        }
    </style>

    <div class="info">
        <strong>说明：</strong><br>
        - 页面内容中有一个红色盒子，设置了 <code>position: relative; z-index: 1;</code>。<br>
        - 模态框遮罩层 <code>.modal-overlay</code> 设置了 <code>position: fixed; z-index: 1000;</code>。<code>fixed</code> 定位使其脱离文档流并相对于视口定位，同时创建了一个新的、高层级的层叠上下文。<br>
        - 模态框内容 <code>.modal-content</code> 使用 <code>position: absolute;</code> 和 <code>transform</code> 定位在遮罩层中心。<code>transform</code> 也创建了层叠上下文（或者说它在 <code>fixed</code> 的父级上下文中）。由于 <code>.modal-overlay</code> 的 <code>z-index</code> 远高于页面上的任何其他元素（包括那个红色盒子），整个模态框（遮罩+内容）会显示在所有页面内容之上。<br>
        - 点击按钮可以显示/隐藏模态框。
    </div>
</div>

预期结果 6: 点击"打开模态框"按钮后，一个半透明的黑色遮罩会覆盖整个页面（包括那个红色的 z=1 的盒子），并且一个白色的内容框会显示在遮罩中央。

示例 7: 调试 z-index 问题

创建一个常见的 z-index "失效" 场景，并解释原因。

HTML

xml 复制代码

<div class="container">
    <h2>示例 7: 调试 z-index 问题</h2>

    <div class="toolbar" style="position: relative; z-index: 1; background: #f0f0f0; padding: 10px; border: 1px solid #ccc;">
        工具栏 (relative, z-index: 1) - 创建层叠上下文
        <button>按钮 A</button>
    </div>

    <div class="content-wrapper" style="transform: translateZ(0);"> 内容区域 Wrapper (transform 创建了层叠上下文, 层级=0)
        <div class="dropdown" style="position: relative; display: inline-block; margin-left: 20px;">
            <button>下拉菜单触发器</button>
            <div class="dropdown-content" style="display: block; /* 强制显示便于观察 */ position: absolute; background: lightyellow; border: 1px solid gold; padding: 10px; width: 150px; top: 100%; left: 0; z-index: 100;">
                下拉菜单内容 (absolute, z-index: 100)<br>
                期望在工具栏之上，但实际被覆盖了！
            </div>
        </div>
        <p style="margin-top: 50px;">一些普通内容...</p>
    </div>

    <style>
      /* 仅示例 7 需要 */
      .content-wrapper {
         margin-top: 10px;
         padding: 15px;
         border: 1px dashed blue;
      }
      /* .content-wrapper { transform: translateZ(0); }  <-- 如果注释掉这行，下拉菜单会正常显示 */
    </style>

    <div class="info">
        <strong>说明：</strong><br>
        - 工具栏 <code>.toolbar</code> 设置了 <code>position: relative; z-index: 1;</code>，创建了一个层级为 1 的层叠上下文。<br>
        - 下拉菜单内容 <code>.dropdown-content</code> 设置了 <code>position: absolute; z-index: 100;</code>，期望它显示在最上面。<br>
        - <strong>问题根源：</strong>包裹下拉菜单的 <code>.content-wrapper</code> 设置了 <code>transform: translateZ(0);</code> (或其他如 opacity, filter 等)。这使得 <code>.content-wrapper</code> 创建了一个新的层叠上下文，其层级相当于 <code>z-index: auto</code> 或 <code>0</code>。<br>
        - 现在比较的是 <code>.toolbar</code> (层级 1) 和 <code>.content-wrapper</code> (层级 0)。显然，工具栏会覆盖整个内容区域。<br>
        - 即使下拉菜单内容 <code>.dropdown-content</code> 的 <code>z-index</code> 是 100，它也被限制在 <code>.content-wrapper</code> 这个层级为 0 的上下文中，无法超越层级为 1 的工具栏。<br>
        - <strong>解决方案：</strong>
            1.  移除 <code>.content-wrapper</code> 上导致创建层叠上下文的属性 (如 <code>transform</code>)，如果它不是必需的。
            2.  调整 HTML 结构，将下拉菜单移出 <code>.content-wrapper</code>，使其与 <code>.toolbar</code> 处于同一层级进行比较。
            3.  提升 <code>.content-wrapper</code> 的层叠层级，例如给它也加上 <code>position: relative; z-index: 2;</code> (但这可能引入新的复杂性)。
            4.  给 <code>.toolbar</code> 使用 <code>isolation: isolate;</code> (如果不需要 z-index=1 的效果)，并给 <code>.content-wrapper</code> 也添加 <code>isolation: isolate; z-index: 1;</code> (或更高)，利用 isolation 控制上下文创建。
    </div>
</div>

预期结果 7: 下拉菜单的内容（黄色背景）会被上方的灰色工具栏遮挡一部分或全部。如果注释掉 .content-wrapper 的 transform 样式，下拉菜单则会正常显示在工具栏之上。

调试技巧

浏览器开发者工具：
- 检查元素 (Inspect Element) ：查看元素的 Computed（计算样式）面板，可以看到最终生效的 position 和 z-index。
- 层 (Layers) 面板（Chrome/Edge）：这个面板可以可视化页面的层叠上下文和合成层。你可以看到哪些元素创建了新的上下文/层，以及它们的绘制顺序。对于理解复杂页面的堆叠非常有帮助。
- 3D 视图 (3D View) （Firefox）：提供一个可交互的页面 3D 模型，可以清晰地看到元素的堆叠关系。
逐步排查：
- 从有问题的元素开始，向上检查其所有父元素。
- 寻找那些可能创建了层叠上下文的属性（position, z-index, opacity, transform, filter, isolation 等）。
- 判断出问题的元素和那个遮挡它的元素是否处于同一个层叠上下文。如果不是，比较它们各自所在上下文的层级。
简化测试：将相关的 HTML 和 CSS 提取到一个简单的 Codepen 或 JSFiddle 中，排除无关样式和脚本的干扰，更容易定位问题。

总结

CSS 层叠上下文是控制元素 Z 轴堆叠顺序的核心机制。理解哪些属性会创建层叠上下文、层叠上下文内部的堆叠规则以及 z-index 的局部作用域，是进行复杂网页布局和解决元素覆盖问题的关键。当遇到 z-index 不按预期工作时，首先要检查的就是相关元素及其祖先元素是否无意中创建了新的层叠上下文，从而改变了 z-index 的比较范围。熟练运用开发者工具的层(Layers)面板或 3D 视图可以极大地帮助理解和调试层叠问题。