z-index对opacity元素失效是因为opacity小于1会强制创建新层叠上下文，使子元素z-index仅在该上下文中生效，无法与外部元素比较层级；需通过devtools检查stacking context定位源头，并用rgba替代或提升元素至body下解决。
z-index 为什么对 opacity 元素失效
因为 opacity 小于 1（哪怕 opacity: 0.999）会强制创建新的层叠上下文，把子元素的 z-index “锁死”在该容器内部——它和外部元素根本不在同一个 Z 轴空间里比高低。
你给弹窗设 z-index: 9999，但它父容器有 opacity: 0.9，那这个弹窗就只能跟同级兄弟比层级，连它爸都出不去，更别说压住隔壁卡片了。
- 不是值不够大，是“比都没法比”
-
opacity: 0.99和opacity: 0.1效果一样：都会创建层叠上下文 - 哪怕父容器没写
z-index，只要opacity ，就自动变成新层叠根
如何快速定位哪个 opacity 在“截胡”
打开 Chrome DevTools → 选中被遮挡的元素 → 右侧 Computed 面板 → 搜索 stacking context。如果某祖先节点显示 This element establishes a stacking context，它就是源头。
- 重点检查
opacity、transform、filter、will-change这几项是否非默认值 - 注意：
transform: scale(1)或translateZ(0)看似没动，但也会触发上下文 - 临时删掉父级
opacity，遮挡立刻消失 → 就是它
修复方案：改父级还是提子元素？
取决于你能不能动父容器样式。两种路径都有效，但适用场景不同：
- 如果
opacity只为过渡动画（比如淡入），直接删掉或改用visibility+transition: opacity延迟触发 —— 最干净 - 如果必须保留半透明效果，就把需要“突围”的元素（如 tooltip、dropdown）用
position: fixed提到下，并手动计算top/left（注意滚动偏移） - 别在子元素上堆
z-index: 999999，它破不了父级的“结界”
容易被忽略的细节
很多人以为 z-index 是开关，其实它是排序规则——只在“同一间屋子”里生效。而 opacity 就是悄悄给你盖了一间新屋子，门一关，里面再吵外面也听不见。
真正要调的往往不是子元素的 z-index，而是它头顶那个带 opacity 的父容器，或者整个上下文结构的设计方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
