z-index失效主因是父元素创建了独立层叠上下文，而非数值过小；需检查目标元素是否定位（非static）、父级是否含opacity
z-index 失效，几乎从不因为数值写小了，而是你没意识到某个父元素已经悄悄把它关进了一个独立的“层叠盒子”里——子元素再怎么调 z-index，也出不去。
检查目标元素是否已定位
最基础但最高频的错误：给元素写了 z-index: 999，却忘了它必须是定位元素。position: static（默认值）下，z-index 完全被浏览器忽略，连 warning 都不报。
- 用开发者工具检查该元素的 Computed 样式，确认
position不是static - 临时加一句
position: relative（不影响文档流），立刻验证是否恢复层级控制 - 注意 JS 动态插入样式时容易漏掉
position声明；Vue/React 中 class 切换后，也要确保定位属性没被其他规则覆盖
定位触发堆叠上下文的父元素
只要某个祖先元素满足以下任一条件，它就创建了新的层叠上下文（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会让元素沉到父上下文的背景和边框之下，慎用
修复时优先提升容器而非堆子元素数值
两个不同堆叠上下文里的元素，即使子元素 z-index: 9999，也可能被父级 z-index: 1 的容器整体压在下面。真正难的不是堆数字，而是看清谁在哪个盒子里比大小。
- 若父容器必须保留
transform或opacity（比如动画需求），就把该容器自身设为高z-index，让它整体“抬高” - 对 modal / tooltip 类组件，避免套在带
transform的布局容器里；改用createPortal（React）或Teleport（Vue）挂到根节点 - 移动端特别注意
translateZ(0)和position: fixed的降级行为，某些场景下会隐式创建不可见的上下文边界
真正容易被忽略的是：一旦有 transform、opacity 或 filter 出现在 DOM 路径上，就得停下来问一句——这个“盒子”，是不是我真想让它存在？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
