z-index失效主因是元素未定位或父级创建了层叠上下文；需确认position非static，检查opacity/transform/filter等触发条件，并优先调整dom结构或容器层级。
z-index写了但没反应，先查position是不是static
浏览器只认定位元素的z-index，position: static（默认值）下写的任何z-index都会被直接忽略，不报错、不警告、不生效。这是最常踩的坑。
- 用 Chrome DevTools 的 «Computed» 面板搜
position，确认最终值不是static - 临时加一句
position: relative（不影响文档流），立刻验证是否恢复层级 - JS 动态插入元素时，容易漏掉
position声明；Vue/React 中 class 切换后，也要检查是否被其他样式覆盖回static -
display: flex或grid容器的子项虽能响应z-index，但前提是父容器本身已创建层叠上下文（比如有transform），否则子项的z-index仅在 flex/grid 内部起作用
父级悄悄建了“层叠盒子”，子元素z-index就关在里面了
只要某个祖先元素满足以下任一条件，它就自动创建新的层叠上下文（stacking context），子元素的 z-index 只能在它内部比大小，出不去。
-
opacity小于 1（哪怕opacity: 0.999） -
transform不为none（包括transform: translateZ(0)、scale(1)、rotate(0.0001deg)） -
filter不为none（哪怕filter: blur(0)） -
will-change: transform或will-change: opacity -
isolation: isolate（注意拼写，不是isolation: on） -
position: fixed或sticky且z-index不是auto
在 DevTools 的 Elements 面板逐级点击父节点，右侧面板 «Layout» 标签页里看 «Stacking context» 是否突然变成 Yes；临时注释掉可疑父级的 transform 或 opacity，遮挡是否立刻消失——这是最快定位手段。
z-index: 0 和 z-index: auto 的区别很关键
z-index: 0 不是“安全默认值”，它会强制创建新层叠上下文；而 z-index: auto（默认）不会——前提是元素已定位。这个细节常导致“啥都没改，突然就盖不住了”。
- 检查父容器是否意外设置了
position: relative+z-index: 0，等于主动建了个结界 - 若只是想让元素参与层叠排序但不想隔离上下文，用
z-index: auto更稳妥 -
z-index: -1会让元素沉到父上下文的背景和边框之下，不仅视觉被盖，还可能拦截不到鼠标滚轮事件（滚动条失效）
修复不能只堆数字，得动DOM结构或提升容器层级
两个不同层叠上下文里的元素，即使子元素 z-index: 9999，也可能被父级 z-index: 1 的容器整体压在下面。真正要调的不是子元素，而是它的“入口点”。
- 确保需要全局分层的元素（如弹窗、下拉、Tooltip），其最近共同祖先不提前创建层叠上下文
- 若必须保留
transform或opacity，考虑把它们上移到更高层级容器（比如挂到body下的 wrapper 上），而不是套在目标元素正上方 - 对强交互浮层（如 modal、picker），可 JS 拿到 DOM 节点后
document.body.append(el)，再手动计算top/left定位
层叠上下文不是样式错误，而是文档流被截断——真正难的不是写多少 z-index，而是判断哪个祖先节点不该“升维”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
