网站免费正能量小说/品牌网络营销案例
z-index 工作原理及层叠上下文（Stacking Context）
在 CSS 中，z-index 主要用于控制元素的堆叠顺序，决定哪些元素显示在上层，哪些元素在下层。它的工作原理涉及 层叠上下文（Stacking Context），理解这一概念对正确使用 z-index 至关重要。
- z-index 的基本规则
z-index 只能作用于 position 为 relative、absolute、fixed 或 sticky 的元素，static（默认值）无效。
z-index 数值越大，元素越靠上。
默认情况下，HTML 元素按照 DOM 顺序 依次渲染，后出现的元素会覆盖前面的元素。
- 层叠上下文（Stacking Context）
层叠上下文 是 CSS 视觉渲染中的一个独立层级概念，类似一个 “小世界”，里面的子元素只在该上下文内进行层叠，而不会影响外部的层级关系。
层叠上下文的创建方式：
一个元素会在以下情况下 自动创建 层叠上下文：
-
根元素（）：它是默认的最顶层层叠上下文。
-
z-index 不是 auto 且 position 值为 relative、absolute、fixed。
-
opacity < 1（即 opacity: 0.99 也会触发）。
-
transform（如 transform: scale(1)）。
-
filter（如 filter: blur(5px)）。
-
perspective（如 perspective: 500px）。
-
clip-path、mask、contain（layout 或 paint）。
-
will-change: transform（触发 GPU 加速）。
注意：层叠上下文内的元素只能相互比较 z-index，不会受外部 z-index 影响。
- 层叠顺序（Stacking Order）
当多个元素处于同一层叠上下文时，它们的默认层叠顺序如下（从低到高）：
-
根元素 （最低层）
-
正常流的块级元素（static 或 relative 且 z-index: auto）
-
负 z-index 的 position: absolute/fixed 元素
-
普通的 inline 或 inline-block 元素
-
z-index: auto 的 position: relative/absolute/fixed 元素
-
z-index >= 0 的 position: relative/absolute/fixed 元素
-
拥有 opacity < 1 的元素
-
拥有 z-index 的层叠上下文
- z-index 的常见问题
(1) z-index 失效？
原因：
没有 position：如果 position 为 static，z-index 不生效。
层叠上下文问题：子元素的 z-index 不能超越父级的层叠上下文。
被 opacity: <1 创建的新层叠上下文困住。
示例
.parent {
position: relative;
z-index: 10;
opacity: 0.9; /* 创建了新的层叠上下文 */
}
.child {
position: absolute;
z-index: 999; /* 仍然受 parent 约束，不会超出 */
}
(2) z-index 负值是否可用？
负 z-index 可以让元素 低于 常规文档流的内容，但不会低于 background（背景）。
- 例子
(1) 层叠上下文影响 z-index
.parent {
position: relative;
z-index: 2;
background: red;
width: 200px;
height: 200px;
}
.child {
position: absolute;
z-index: 999;
background: blue;
width: 100px;
height: 100px;
}
.sibling {
position: relative;
z-index: 1;
background: green;
width: 200px;
height: 200px;
margin-top: -100px;
}
结果
.child 的 z-index: 999 只影响 .parent 内部，不影响 .sibling。
.parent 的 z-index: 2 高于 .sibling 的 z-index: 1，所以 .parent 覆盖 .sibling。
-
总结
-
z-index 只有在 position 为 relative/absolute/fixed/sticky 时生效。
-
层叠上下文会隔离 z-index，内部的 z-index 无法超出父级的层叠上下文。
-
某些 CSS 属性（opacity<1、transform、filter 等）会创建新的层叠上下文。
-
负 z-index 可能会让元素低于普通内容，但不会低于背景。
如果遇到 z-index 失效，首先检查是否 被层叠上下文限制 了！