opacity小于1会强制创建新层叠上下文，使子元素z-index仅在该上下文中生效，无法与外部元素跨层级比较；需通过devtools检查stacking context定位源头，用rgba替代或提升元素至body下解决。
直接说结论：opacity 小于 1 不是“导致层级改变”，而是强制创建新层叠上下文（stacking context），让子元素的 z-index 失去跨父级比较能力——它根本不在同一个 Z 轴空间里，不是值不够大，是比都没法比。
为什么 opacity: 0.99 会让 z-index 突然“失效”
只要父元素 opacity 小于 1（哪怕 opacity: 0.999），浏览器就会把它当作一个独立的层叠根。这意味着：
- 它的所有子元素
z-index只在它内部起作用，无法盖住同级兄弟元素 - 即使子元素写了
z-index: 999999，也出不了这个“透明盒子”的边界 - 没设
position的普通流元素加了opacity，会因隐式获得更高层叠权重而“浮上来”，看起来像z-index生效了，其实只是上下文层级变了
怎么快速定位哪个 opacity 在“截胡”
打开 Chrome DevTools → 选中被遮挡的元素 → 右侧 Computed 面板搜索 stacking context：
- 如果某祖先节点显示
This element establishes a stacking context，就是它 - 重点检查
opacity、transform、filter、will-change是否非默认值 -
transform: scale(1)或translateZ(0)看似没动，但也会触发上下文 - 临时注释掉该元素的
opacity声明，遮挡立刻消失 → 就是它
真正有效的修复方案，不是堆 z-index
别在子元素上狂加 z-index: 999999，它破不了父级的“结界”。两种路径都有效，但适用场景不同：
- 如果
opacity只为过渡动画（比如淡入），直接删掉，或改用visibility: hidden+transition: opacity延迟触发 —— 最干净 - 如果必须保留半透明效果，就把需要“突围”的元素（如
tooltip、dropdown）用 JS 移到document.body下，脱离原上下文，并手动计算top/left（注意滚动偏移） - 给触发上下文的父容器自身设高
z-index（比如z-index: 1050），而不是堆子元素数值 - 多个交互层共存时，确保它们处于同一层叠上下文，否则
z-index数值再大也无意义
替代方案：用 rgba() / hsla() 实现局部透明
想让背景或文字半透，又不想破坏 z-index 流，就别碰父级 opacity：
-
background-color: rgba(255, 255, 255, 0.8)—— 背景透明，子元素完全不受影响 -
color: hsla(200, 100%, 50%, 0.7)—— 文字带透明度，不影响布局或堆叠顺序 - 避免对容器设
opacity: 0.5再给子元素补opacity: 1，无效：透明度已继承且不可逆 - 复杂背景时用
::before伪元素隔离：position: absolute+background: rgba(...)+z-index: 1，内容层z-index: 2
真正难处理的不是 opacity 本身，而是它悄无声息地把整个子树“隔离”进新上下文——这点最容易被忽略，也最常被 DevTools 的 Computed 面板漏掉，得主动搜 stacking context 才能看见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
