z-index不生效的主因是元素未定位或处于独立层叠上下文中；必须设置position且避免父级触发opacity、transform等新层叠上下文，否则子元素z-index仅在内部有效。
z-index 不生效的常见原因
z-index 只对「定位元素」起作用，也就是说，元素必须有 position 值为 relative、absolute、fixed 或 sticky 才能参与层叠上下文（stacking context）的排序。
如果只是给一个 div 设置了 z-index: 999，但没设 position，那它完全被忽略。
- 检查目标元素是否设置了有效的
position值 - 父容器若创建了新的层叠上下文（比如设置了
opacity: 0.99、transform、filter或will-change），子元素的z-index就只在该上下文内有效，无法盖过父容器外的其他元素 - 多个同级元素之间比较
z-index，但不同层叠上下文之间不直接比较数值大小
如何判断当前元素是否处于独立层叠上下文
浏览器开发者工具里看不出层叠上下文，但可以通过 CSS 触发条件反向排查：
- 查看元素及其所有祖先是否有以下任意一条声明：
transform（非none）、opacity（小于 1）、filter（非none）、will-change（含transform/opacity等）、isolation: isolate、contain: layout paint - 若存在，该祖先就建立了新层叠上下文，其内部所有
z-index都被“关进笼子”，再大也出不去 - 此时要提升层级，得把目标元素移出这个上下文，或把它的父容器整体提上去（比如给父容器加
z-index和position: relative）
覆盖第三方组件（如弹窗、下拉菜单）时的实操建议
很多 UI 库（如 Ant Design、Element Plus）内部组件自带 z-index，且用 CSS-in-JS 或动态插入方式设置，容易被你写的样式覆盖失败。
- 不要盲目写
z-index: 999999，先用开发者工具检查真实计算值（Computed →z-index） - 优先通过类名前缀或属性选择器提高权重，例如：
.my-modal .ant-modal { z-index: 2000 !important; }（仅在必要时用!important） - 如果是 Vue/React 组件，考虑用
:deep()或::v-deep（Vue）或styled-components的&嵌套穿透写法控制子组件层级 - 更稳妥的做法：在应用根节点统一定义基础
z-index变量，例如--z-modal: 1000;，然后各组件按需引用，避免混乱叠加
移动端 Safari 中 z-index 失效的特殊处理
iOS Safari 对 z-index 和层叠上下文更敏感，尤其在使用 transform: translateZ(0) 或 backface-visibility: hidden 强制硬件加速后，可能意外创建新层叠上下文。
- 避免无意义的
transform或opacity动画残留（比如动画结束后未重置为none/1） - 若必须用
transform，可配合z-index同时作用于同一元素，并确保父容器没有干扰性样式 - 测试时务必真机调试，模拟器有时不还原真实渲染行为
真正卡住的时候，往往不是 z-index 数值不够大，而是它根本没进入同一场“层叠游戏”。看清谁建了上下文，比拼命加数字管用得多。
立即学习“前端免费学习笔记（深入）”；
