z-index失效主因是元素position为static或父级创建了层叠上下文。需确保position非static，且检查祖先是否含opacity
z-index写了但没反应，先看position是不是static
浏览器压根不读z-index，只要元素的position是static（默认值），它就自动被排除在层叠计算之外。这不是“效果弱”，而是“不参与”。
实操建议：
- 打开开发者工具，选中目标元素，在「Computed」面板里搜
position，看最终值是不是static - 临时加一行
position: relative（几乎不影响布局），刷新看z-index是否立刻起效 - JS 动态插入元素时，只改
z-index、漏掉同步设置position是高频错误；Vue/React 中 class 切换后，也要确认定位声明没被其他规则覆盖或重置为initial/unset
父级用了opacity、transform或filter，子元素z-index就被“关进盒子”了
即使你给子元素写了position: absolute和z-index: 9999，只要它的任意一个祖先元素设置了以下任一属性，就会形成独立层叠上下文，把子元素的z-index锁死在内部：
-
opacity小于1（比如opacity: 0.99） -
transform非none（哪怕只是transform: translateZ(0)或scale(1)） -
filter、will-change、isolation: isolate、contain: layout paint -
position: fixed或sticky+z-index非auto
此时子元素的z-index: 9999只能跟同个父容器下的兄弟比高低，根本盖不过隔壁z-index: 1的弹窗——因为它们不在同一个上下文里。
用Chrome DevTools快速定位“结界源头”
真正难的不是写对那行z-index，而是得顺着 DOM 往上翻三五层，找到那个没声没息就切断层级链的transform或opacity。
实操建议：
- 在 Chrome DevTools 的 Elements 面板中逐级点击父节点，在右侧面板 «Layout» 标签下看「Stacking context」是否突然变成
Yes；重点盯那些“没写z-index却显示Yes”的父元素 - 临时注释掉父级的
opacity或transform，看遮挡是否立即消失——这是最快验证手段 - 如果必须保留动效又需要层级穿透，把目标元素用 JS 移到
document.body下，配合position: fixed手动定位（适合弹窗、Tooltip）
Flex/Grid 子项的z-index失效，别只怪父容器
Flex 或 Grid 容器本身不创建层叠上下文，但子项必须显式设position才能响应z-index；否则即使写了，也等于没写。
更隐蔽的是：子项自己加了transform（哪怕是transform: rotate(0)），也会立刻创建新层叠上下文，导致它的z-index只对其内部后代有效，无法和同级兄弟竞争。
实操建议：
- Flex 子项要生效
z-index，必须同时满足：position非static+ 父级未触发层叠上下文 + 自身没叠加transform/opacity等触发属性 - 若父容器已触发上下文，给子项设
z-index: 9999没用；得给那个父容器本身加z-index（比如z-index: 100）来提升整块区域 -
z-index: 0和z-index: auto表面相似，实际效果截然不同——前者会显式创建新上下文，后者不会（前提是元素已定位）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
