z-index不生效主因是元素未处于同一层叠上下文：父元素设opacity<1、transform等会隐式创建新上下文，使子元素z-index仅在内部生效；需确保同级元素父容器无此类属性且自身z-index为数值。
z-index 不生效的常见原因
相对定位元素加了 z-index 却没反应，大概率是因为它没进入「层叠上下文」。CSS 的 z-index 只对「定位元素」（position 为 relative、absolute、fixed 或 sticky）生效，但更关键的是：它的父容器如果创建了新的层叠上下文，子元素的 z-index 就只在该上下文中比较，不会和外部元素直接比。
- 父元素设置了
opacity小于 1、transform、filter、will-change等属性，会隐式创建层叠上下文 - 父元素本身有
z-index（且position不是static），也会创建层叠上下文 -
z-index: auto（默认值）的定位元素不参与层叠顺序计算，必须显式设为数字
比如两个兄弟 div 都是 position: relative，一个设 z-index: 2，另一个设 z-index: 1，能正常分层；但如果前者被包在一个 opacity: 0.99 的容器里，它的整个子树就“缩进”到一个新层叠上下文中，对外部的层级关系就失效了。
相对定位元素之间正确控制重叠顺序
要让多个 position: relative 元素按预期堆叠，核心是确保它们处于同一层叠上下文，且 z-index 值可比。
- 所有目标元素的父容器应避免触发隐式层叠上下文（如不用
transform包裹，或确认不需要动画时移除will-change） - 各元素自身需明确设置
position: relative和数值型z-index（不能是auto） - 数值越大越靠前，负值也合法（如
z-index: -1会沉到底部，甚至可能被父背景盖住）
.box-a { position: relative; z-index: 10; }
.box-b { position: relative; z-index: 5; }
.box-c { position: relative; z-index: 1; }只要这三个元素是同级、父容器没创建新层叠上下文，.box-a 就一定盖在 .box-b 上，.box-b 盖在 .box-c 上。
立即学习“前端免费学习笔记（深入）”；
与其他定位方式（如 absolute）混用时的层级陷阱
相对定位元素和绝对定位元素混排时，它们的 z-index 是放在同一个层叠上下文中比较的——前提是它们没有被不同层叠上下文隔离。
- 如果一个
absolute元素的父容器有z-index: 1，而一个relative元素是其兄弟节点且父容器无z-index，那absolute所在分支整体可能被压在下面 - 更隐蔽的情况：某个祖先元素设置了
z-index: 0（且position不是static），它就成了层叠上下文根，所有后代的z-index都只在它内部有效
调试建议：在浏览器开发者工具中选中元素，看「Computed」面板里的 z-index 是否显示为实际数值；再往上逐级检查「Layers」或「Layer borders」（Chrome 的 Rendering 面板），确认有没有意外的层叠上下文被激活。
移动端或复杂布局中容易被忽略的细节
iOS Safari 和部分安卓 WebView 对 z-index 的解析更敏感，尤其在使用 transform: translateZ(0) 强制硬件加速时，会无意中创建层叠上下文。
- 不要为了“提升性能”盲目加
transform: translateZ(0)或will-change: transform到父容器 - 使用
backface-visibility: hidden也可能触发新层叠上下文（虽不常见） - Flex 或 Grid 容器本身不会创建层叠上下文，但若给它加了
z-index（且position改为relative），它就变成层叠上下文根了
最稳妥的做法：需要精确控制重叠时，把相关元素提一层，放到同一个干净的、无额外样式干扰的父容器下，并统一管理它们的 z-index 值域（比如固定用 10/20/30，留出扩展余地）。
