加了 transform 或 opacity 后 z-index 不生效，是因为父元素创建了新的堆叠上下文，使子元素的 z-index 仅在该上下文中生效；需检查并移除触发属性或调整元素挂载位置。
为什么加了 transform 或 opacity 后 z-index 突然不生效
不是 z-index 写小了，是父元素悄悄创建了新堆叠上下文，把子元素“关进盒子”里了。只要祖先元素满足以下任一条件，它就成为独立层叠上下文的边界：transform 不为 none、opacity 小于 1、filter 不为 none、will-change 指向相关属性、position: fixed 或 sticky 且 z-index 非 auto。
此时子元素再设 z-index: 9999，也只在该父容器内部比大小，无法越过边界盖住外部同级元素（比如固定导航栏）。
实操建议：
- 打开 Chrome DevTools → Elements 面板 → 逐级点击父节点 → 右侧 Layout 标签页查看「Stacking Context」是否为
Yes - 临时删掉或注释掉疑似触发的样式（如
transform: scale(1)、opacity: 0.99），看遮挡是否立刻消失 - 别只调子元素
z-index，优先确认是否真需要这个父级上下文；若不需要，直接移除触发属性
如何让弹窗/下拉菜单突破父级堆叠上下文
当弹窗（如 .dropdown-menu）被包裹在某个带 transform 的卡片内，即使自身 z-index: 1000，仍会被压在导航栏下面——因为它的整个父容器已是一个低层级上下文。
立即学习“前端免费学习笔记（深入）”；
修复关键不是“堆数值”，而是“换容器”：
- 将弹窗类元素用
position: fixed或position: absolute脱离原父级，挂到body下（需 JS 动态计算位置） - 确保挂载后手动处理滚动偏移（
fixed不随滚动动，absolute需监听scroll更新top/left） - 避免用
z-index: -1或z-index: 0“保险”：前者会让元素沉到父背景之下，后者反而会主动创建新上下文
z-index: auto 和 z-index: 0 的实际差异在哪
很多人以为 z-index: 0 是“中性安全值”，但它其实是个隐性陷阱：只要元素已定位（position: relative 等），z-index: 0 就会强制创建新堆叠上下文；而 z-index: auto（默认值）不会。
这意味着：
- 父容器设了
position: relative; z-index: 0→ 它和所有子元素构成封闭上下文 → 子元素再高也出不去 - 父容器设
position: relative; z-index: auto→ 不创建新上下文 → 子元素可参与外层统一排序 - 想“参与排序但不隔离”，就用
z-index: auto；想“明确归入某一层”，才设具体数值（如100、1000）
定位失效导致 z-index 彻底被忽略
z-index 对 position: static 元素完全无效，浏览器连 warning 都不报。这是最常被忽略的基础前提。
检查方式：
- 在 DevTools 的 Computed 面板确认目标元素的
position值不是static - 临时加
position: relative（不改变布局），看层级是否立刻恢复 - 注意框架场景：Vue 中 class 切换可能覆盖了
position；React 中 inline style 未显式声明position就等于static - JS 动态插入元素时，务必同时设置
position和z-index，不能只写后者
真正难的不是调高数值，而是识别哪个祖先正在无声地重置规则——堆叠上下文从不报错，只默默收走你的控制权。
