z-index 是 CSS 中用于控制元素堆叠顺序（stacking order）的重要属性，数值越大，元素越“靠前”。但 z-index 并非在所有情况下都生效。以下是 z-index 失效的常见场景及其原理，适合在面试中系统性地回答。
✅ 一、z-index 失效的 6 大常见情况
1. 元素没有定位（position）
z-index 只对定位元素有效（即 position 值为 relative、absolute、fixed 或 sticky）。
.box {
z-index: 999; /* ❌ 无效 */
}
.box {
position: relative;
z-index: 999; /* ✅ 有效 */
}🔴 原因：
z-index的作用依赖于“层叠上下文”（Stacking Context），而定位是创建层叠上下文的前提之一。
2. 父元素创建了层叠上下文，且层级较低
即使子元素 z-index 很高，也无法突破父元素的层叠上下文。
<div class="parent-a" style="position: relative; z-index: 1;">
<div class="child-a" style="position: absolute; z-index: 999;">A</div>
</div>
<div class="parent-b" style="position: relative; z-index: 2;">
<div class="child-b" style="position: absolute; z-index: 10;">B</div>
</div>🔴 结果：
child-b会显示在child-a上面，尽管child-a的z-index更高。
🔴 原因：parent-b的z-index: 2>parent-a的z-index: 1，所以整个parent-b层级更高。
3. 元素被其他层叠上下文“隔离”
以下 CSS 属性会创建新的层叠上下文，导致 z-index 受限于该上下文：
| 属性 | 值示例 | 说明 |
|---|---|---|
opacity | < 1 | 如 opacity: 0.9 |
transform | 任何值（如 translate, rotate） | 即使 transform: none 也会创建 |
filter | 任何滤镜（如 blur, grayscale） | |
will-change | transform, opacity | |
perspective | 任何值 | 3D 变换相关 |
isolation | isolate | 显式隔离 |
mix-blend-mode | 非 normal | 混合模式 |
🔴 后果：该元素及其子元素的
z-index只在自己的层叠上下文中比较，无法与外部元素直接比较。
4. z-index 值相同，遵循 DOM 顺序
当多个定位元素的 z-index 相同，后渲染的元素（DOM 中靠后的）会覆盖前面的。
<div style="position: absolute; z-index: 1;">A</div>
<div style="position: absolute; z-index: 1;">B</div> <!-- B 在 A 上面 -->🔴 注意：这不是
z-index失效，而是其行为的一部分。
5. z-index 应用在 flex 或 grid 子项上，但父容器有层叠上下文
flex 或 grid 容器本身会创建层叠上下文，其子项的 z-index 只在容器内部生效。
.container {
display: flex;
/* 隐式创建层叠上下文 */
}
.item {
position: relative;
z-index: 999;
}🔴 结果：
.item的z-index无法影响容器外部的元素。
6. 浏览器渲染限制或 overflow 影响
- 某些
overflow值（如scroll、auto）可能在特定情况下影响层叠行为。 - 老版本浏览器对
z-index支持不完善（如 IE6/7 的 select 元素问题）。
✅ 二、如何排查 z-index 失效？
- 检查元素是否定位：
position: relative/absolute/fixed/sticky - 检查父元素的
z-index：是否过低或创建了层叠上下文 - 检查是否有
opacity < 1、transform等属性：它们会创建新层叠上下文 - 使用浏览器开发者工具：查看“层叠上下文”和元素的最终堆叠顺序
✅ 三、面试加分点
| 技巧 | 说明 |
|---|---|
| 🌟 理解层叠上下文 | z-index 的作用范围受限于层叠上下文，这是核心原理 |
🌟 避免滥用高 z-index | 如 9999，应合理组织层级结构 |
🌟 使用 isolation: isolate | 显式控制层叠上下文，避免意外 |
| 🌟 移动优先设计 | 在响应式中注意 z-index 的继承问题 |
💬 一句话总结：
“
z-index失效通常是因为元素未定位、父元素层叠层级低，或被opacity、transform等属性创建了新的层叠上下文所隔离。理解‘层叠上下文’是掌握z-index的关键。”
在面试中，能结合 层叠上下文、transform 影响、DOM 渲染顺序 等底层原理分析，会显得你具备扎实的 CSS 功底。
