z-index无效通常因父元素创建了堆叠上下文或目标元素未定位；需确认position非static，并逐级检查触发堆叠上下文的祖先元素（如opacity
z-index 写了但没反应，八成不是数值太小，而是某个父元素悄悄创建了堆叠上下文（stacking context），把你的元素“关”在里面比大小了。
检查目标元素是否已定位
z-index 只对 position 为 relative、absolute、fixed 或 sticky 的元素生效。默认的 static 值下，浏览器直接忽略 z-index，连计算都不算。
- 在 Chrome DevTools 的「Computed」面板里搜
position，确认最终值不是static - 临时加一行
position: relative（几乎不影响布局），看z-index是否立刻起效 - Vue/React 中动态插入样式时，容易漏掉
position；用 class 切换时，也要防被其他规则覆盖回static
逐级排查父元素是否触发堆叠上下文
只要某个祖先元素满足以下任一条件，它就会创建独立堆叠上下文，子元素的 z-index 就只在它内部有效——哪怕你写 z-index: 9999，也出不去。
- 打开 Elements 面板，从目标元素开始逐级点击父节点，在右侧面板 Layout 标签页下看「Stacking context」是否突然变成
Yes - 重点盯那些“没写
z-index却标为Yes”的父元素：大概率是它用了opacity: 0.99、transform: translateZ(0)、filter: blur(0)或will-change: transform - 临时注释掉这些属性，观察遮挡是否消失——这是最快验证手段
修复时别只调子元素的 z-index
子元素 z-index: 9999 被盖住，真正要动的往往是那个触发上下文的父容器本身。
- 如果必须保留
opacity或transform，就给该父容器加position: relative+ 合理的z-index（比如z-index: 100） - 避免对非必要容器设
z-index: 0：它会显式创建新上下文，而z-index: auto不会（前提是已定位） - Modal、Tooltip 等浮层组件，优先用
createPortal挂到document.body下，彻底脱离嵌套干扰
最常被忽略的是：transform: scale(1)、opacity: 0.999、甚至 backdrop-filter: blur(0) 这些“看似无害”的值，都会静默建墙。问题不在你写的那行 z-index，而在 DOM 路径上某处，一个没声没息就截断层级链的 transform 或 opacity。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
