z-index不生效主因是元素无层叠上下文或父容器隐式创建了隔离的层叠上下文；须确保元素定位且层级关系清晰，避免硬编码数值，移动端需注意transform与z-index配合。
z-index 不生效的常见原因
直接给元素加 z-index 却没效果，大概率是因为该元素没有「层叠上下文」或「层叠等级」未被正确触发。z-index 只对定位元素（即 position 值为 relative、absolute、fixed 或 sticky）有效，且其父容器若已建立层叠上下文，子元素的 z-index 就只在该上下文内比较，不会和外部元素直接比。
常见踩坑点：
- 忘记设置
position，仅写z-index—— 完全无效 - 父容器有
opacity: 0.99、transform: translateZ(0)、will-change: transform等隐式创建层叠上下文的属性，导致子元素z-index被“截断” - 用非常大的
z-index（如 9999）掩盖问题，而非理清层级结构 —— 后期维护极易冲突
如何判断元素是否处于同一层叠上下文
浏览器 DevTools 的「Layers」面板（Chrome 中需在 Rendering 面板开启）能直观显示层叠上下文树。但更快速的办法是：检查目标元素及其所有祖先，是否有以下任一属性：
-
position: relative/absolute/fixed/sticky+z-index（非auto） -
opacity小于 1 -
transform不为none -
filter不为none -
will-change包含transform、opacity等 isolation: isolate
只要有一个祖先满足上述任一条件，它就创建了新的层叠上下文，其内部的 z-index 就不再和外部平级比较。
多层弹窗/浮层中 z-index 的合理组织方式
真实项目里，不是靠堆数字决胜负，而是靠语义化分组和 CSS 自定义属性统一管理。例如：
:root {
--z-modal: 1000;
--z-dropdown: 100;
--z-toast: 10;
}
.modal { position: fixed; z-index: var(--z-modal); }
.dropdown { position: absolute; z-index: var(--z-dropdown); }
.toast { position: fixed; z-index: var(--z-toast); }
这样做的好处：
- 避免硬编码数字散落在各处，改一个值就能调整整类组件层级
- 不同组件类型天然隔离，不会因某个下拉框设了
z-index: 999而盖住模态框 - 配合 BEM 或 CSS Modules，可进一步限定作用域，防止全局污染
移动端 Safari 中 z-index 的特殊表现
iOS Safari 对 transform 和 z-index 的组合处理较严格：如果父容器用了 transform（哪怕只是 translateZ(0)），又没显式设 z-index，其子元素即使设了 z-index 也可能被渲染在错误层级。最稳妥的解法是——在触发 transform 的父容器上，也显式声明 z-index: 0 或更高值（且该父容器需有 position）。
典型场景：轮播图容器加了 transform: translateX(...)，上面的「跳转按钮」怎么都点不到，其实是被轮播图内容层挡住了。此时给轮播图容器加 position: relative; z-index: 0; 即可修复。
这种细节不查渲染层或反复试错很难发现，尤其当设计稿没标明交互层级时，容易归因为「点击区域太小」或「事件没绑定」。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
