z-index失效主因是父元素创建了层叠上下文，而非数值过小；需确保元素已定位（非static），并检查opacity、transform、filter等触发条件。
z-index 失效，几乎从不因为数值写小了，而是你没意识到某个父元素已经悄悄把它关进了一个独立的“层叠盒子”里——子元素再怎么调 z-index，也出不去。
为什么加了 z-index 还是被盖住？先看定位有没有生效
最基础但最高频的错误：给元素写了 z-index: 999，却忘了它必须是定位元素。position: static（默认值）下，z-index 完全被浏览器忽略，连 warning 都不报。
- 用开发者工具检查该元素的 Computed 样式，确认
position不是static - 临时加一句
position: relative（不影响文档流），立刻验证是否恢复层级控制 - 注意 JS 动态插入样式时，容易漏掉
position声明；Vue/React 中 class 切换后，也要确保定位属性没被其他规则覆盖
父元素触发了层叠上下文，子元素的 z-index 就“作废”了
只要某个祖先元素满足以下任一条件，它就创建了新的层叠上下文（stacking context），它的所有子元素的 z-index 只在它内部比大小，无法和外部同级元素竞争：
-
opacity小于 1（哪怕opacity: 0.999） -
transform不为none（包括看似无害的transform: translateZ(0)、scale(1)） -
filter不为none（哪怕filter: blur(0)） -
will-change: transform或will-change: opacity isolation: isolate-
position: fixed或sticky+z-index非auto
实操建议：
- 在 Chrome DevTools 的 Elements 面板中逐级点击父节点，右侧面板 Layout 标签页里留意「Stacking Context」是否突然变成 Yes
- 临时注释掉父级的
transform或opacity，看遮挡是否立刻消失——这是最快定位手段 - 别只修子元素，要么删掉父级触发上下文的属性，要么把需要“突围”的元素（如
dropdown、tooltip）用position: fixed挂到body下（记得手动处理滚动偏移）
z-index: 0 和 z-index: auto 看似一样，实际效果截然不同
很多人以为加个 z-index: 0 很安全，其实它会强制创建新层叠上下文——而 z-index: auto（默认）不会（前提是元素已定位）。这个细节常导致“明明啥都没动，突然就盖不住了”。
- 检查父容器是否意外设置了
z-index: 0+position: relative，这等于主动建了个结界 - 如果只是想让元素参与层叠排序但不想隔离上下文，用
z-index: auto更稳妥 - 负值如
z-index: -1会让元素沉到父上下文的背景和边框之下，慎用
真正难的不是堆数字，而是看清谁在哪个盒子里比大小。一旦有 transform、opacity 或 filter 出现在 DOM 路径上，就得停下来问一句：这个“盒子”，是不是我真想让它存在的？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
