z-index不生效主因是元素未定位或被父级层叠上下文隔离；必须设position为relative/absolute/fixed/sticky才激活z-index，且opacity
z-index不生效，先看元素有没有定位
z-index只对position为relative、absolute、fixed或sticky的元素起作用。静态定位（position: static，默认值）下设z-index完全被忽略——浏览器连解析都不解析，DevTools 的 «Computed» 面板里会显示 auto 或直接标为 «not applicable»。
常见错误现象：z-index: 9999写了但压不住兄弟元素；父容器没设position，子元素的z-index在跨层比较时行为诡异。
- 用 Chrome DevTools 选中目标元素 → «Computed» 标签页搜
z-index，若显示auto，说明它根本没进入层叠计算流程 - 检查父级是否显式设置了
position：哪怕只是position: relative，也能让子元素的z-index在该上下文中生效 - IE11 和旧 Edge 会把
z-index: auto当作0处理，而现代浏览器仍按文档流顺序渲染 —— 这会导致同一套 CSS 在不同环境里层级翻车
opacity、transform 等属性会静默创建层叠上下文
不是 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
Chrome DevTools 的 «Layout» 面板里点父节点，看 «Stacking context» 是否为 Yes；第一个标为 Yes 的就是“结界源头”。临时注释掉这些样式，遮挡立刻消失——这就是实锤。
不同浏览器对层叠上下文的触发阈值不同
Safari ≤ 12.1、IE11 和老 Edge 对创建层叠上下文更敏感，而 Chrome/Firefox 相对宽松。典型差异：
- Chrome 对
transform: translateY(0)通常不触发上下文；Firefox 可能忽略；Safari 某些版本对opacity: 0.99就触发 - 一个带
position: relative+z-index: 1的父容器，在 Safari 中可能让子元素彻底失去与页面其他区域的层级关联 - iOS Safari 对
html或body上的transform: translateZ(0)极其敏感——整页变成单一层叠上下文，再高的z-index也出不去
测试时务必打开 Safari 的 «开发者 > 显示 Web 检查器 > 元素 > 显示层叠上下文»（如有），不能只靠 Chrome 判断。
修复不是堆数字，而是提级或绕开
子元素再怎么调 z-index: 9999，也破不了父级的“结界”。必须从结构层面解决：
- 如果父容器的
transform或opacity非必需（比如只为触发硬件加速），直接删掉——最干净 - 如果必须保留（如淡入动画），就把需要浮出的元素（如
dropdown、modal）用 JS 移到document.body下，配合position: fixed手动定位（别忘了监听scroll和resize更新位置） - 更可控的做法：给那个触发上下文的父容器自身设高
z-index（比如z-index: 105），让它整体抬高 - Tailwind 用户注意：
zIndex必须在tailwind.config.js中以对象语法定义（如{ 'modal': '60' }），改完要重启 dev server；z-[999]动态拼接在构建时不会被扫描
真正麻烦的从来不是数值本身，而是哪个元素悄悄建了“墙”，以及这堵墙在不同浏览器里到底有多厚。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
