z-index失效主因是父元素创建了新的堆叠上下文，使子元素z-index仅在该上下文中生效；常见触发属性包括position非static且z-index为具体值、opacity
z-index不起作用？先确认是否创建了新的Stacking Context
绝大多数 z-index 失效，根本原因不是写错了值，而是父元素无意中创建了独立的堆叠上下文（Stacking Context），把子元素“锁”在了自己的层级体系里。一旦形成，子元素的 z-index 只在该上下文中生效，无法和外部兄弟元素直接比高低。
触发新堆叠上下文的常见 CSS 属性包括：position 非 static + z-index 为具体数值（非 auto）、opacity 小于 1、transform 非 none、filter 非 none、will-change 指定某些属性等。
实操建议：
- 用浏览器开发者工具的「Layers」面板或「Computed」标签页，检查目标元素的
stacking context状态（Chrome DevTools 中会明确标出 “Stacking context by …”） - 若父容器用了
opacity: 0.99或transform: translateZ(0)，却没意识到它已隔离层级，就容易误判子元素z-index为何压不住隔壁弹窗 - 临时调试时，可给疑似“上下文制造者”的父元素加
outline: 1px solid red快速定位
同级元素 z-index 无效？检查是否都在同一个 stacking context 里
两个并列的 div，一个设 z-index: 100，另一个设 z-index: 1，但后者反而盖在前者上面——大概率因为它们**不属于同一个堆叠上下文**。比如前者在 body 下直系，后者被包在一个 position: relative; z-index: 0 的容器里，这个容器就成了新上下文，其内部所有 z-index 都只跟这个容器比，而不是跟 body 下其他元素比。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 避免对非必要容器设置
z-index（尤其是0或负值），z-index: 0在position非static时也会创建新上下文 - 如需全局控制层级，尽量把高优先级元素（如 toast、modal）挂到
body下，绕过中间嵌套上下文干扰 - 用
getComputedStyle(el).getPropertyValue('z-index')在控制台验证真实计算值，注意auto和0的语义完全不同
modal 被 iframe 或 video 盖住？这是浏览器原生渲染层限制
即使 z-index: 9999，modal 仍可能被 iframe、video、select（旧版 IE/Edge）遮挡。这不是 CSS 层级问题，而是这些元素默认使用操作系统级渲染层（OS compositor layer），天然高于普通 DOM 元素的绘制层级。
实操建议：
- 对
iframe添加allow="autoplay; fullscreen"并确保其z-index不高于 modal 容器（但它本身不响应z-index） - 关键解法是给
iframe加style="wmode=transparent"（仅对老式 Flash/部分嵌入有效）或更通用的：iframe { position: relative; z-index: -1; }—— 注意：这会让 iframe 自身退到父容器背景后，需配合父容器overflow: visible和合理尺寸 - 现代方案：用
iframe的loading="lazy"或动态插入/销毁，避免常驻干扰
为什么 Chrome 里 z-index 表现和 Firefox 不一样？
不同浏览器对“何时创建 stacking context”的判定略有差异。例如，Firefox 对 will-change: transform 更敏感，而 Safari 在 backface-visibility: hidden 下更容易触发新上下文；Chrome 84+ 开始对 transform: scale(1) 这类无实际变化的声明也创建上下文，旧版则忽略。
实操建议：
- 不要依赖“视觉上看起来正常”就认为跨浏览器安全，必须在三端（Chrome/Firefox/Safari）都验证堆叠顺序
- 用
CSS.supports('will-change', 'transform')做特性检测，而非硬写will-change - 生产环境慎用
will-change，它不是性能银弹，滥用反而增加内存开销和意外创建上下文
堆叠上下文不是 bug，是 CSS 渲染模型的必然产物。真正难的不是记住哪些属性触发它，而是每次写 position 和 z-index 之前，下意识问一句：“我正在进入哪个上下文？它的父级是不是已经把我框死了？”
