opacity值不为1（如0.999）会强制创建独立层叠上下文，使子元素z-index仅在该上下文中生效，无法与外部兄弟元素比较层级。
设置了 opacity 会强制创建新的层叠上下文（stacking context），不是“层级变高”而是“独立成层”，它不再和父级的 z-index 同层比较，而是自成一套渲染顺序。
opacity 怎么触发新层叠上下文？
只要 opacity 值不是 1（哪怕 0.999），浏览器就会为该元素创建独立的层叠上下文。这是 CSS 规范明确规定的触发条件之一（其他还有 transform、filter、will-change 等）。
关键点在于：这个新上下文会“截断”内部元素与外部的 z-index 比较链——子元素的 z-index 只在该上下文内生效，无法越过它去和兄弟元素争高低。
- 常见错误现象：
div.parent { z-index: 10; }里有个div.child { opacity: 0.8; z-index: 999; }，结果 child 仍被同级的div.sibling { z-index: 20; }盖住 - 原因不是 z-index 失效，而是
child已脱离parent的层叠上下文，它的z-index: 999只作用于自身内部（如果它有子元素的话） - 父容器没设
position或z-index？那更糟——整个parent默认在auto层叠等级，opacity子元素反而可能“浮”到 body 内其他定位元素之上
为什么用 rgba 背景就不会？
background-color: rgba(0,0,0,0.5) 不触发层叠上下文，因为它只改变颜色通道，不改变元素自身的渲染模型；而 opacity 是作用于整个元素及其所有后代的合成属性，必须新建上下文来隔离混合行为。
这也是为什么想让背景半透明但内容不透明时，优先选 rgba 或 hsla，而不是靠 opacity 再套一层子容器去“补内容不透明”——后者会引入额外层叠问题和重绘开销。
- 如果你真需要子元素穿透 opacity 容器显示在更上层，唯一办法是把它移出该容器 DOM 结构，用定位 + z-index 控制
-
opacity: 0仍会创建层叠上下文，且元素保留占位、可交互（除非同时加pointer-events: none） -
opacity: inherit或opacity: unset不触发新上下文，但也不会继承有效值——实际效果等同于opacity: 1，失去你想要的透明效果
怎么确认某个元素是否进入了新层叠上下文？
Chrome DevTools 的 Elements 面板中选中元素，在右侧 Computed 标签页搜索 stacking context，若显示 “Yes”，就说明它已建立新上下文；也可以看 z-index 是否变成 “auto”（即使你写了数值，也可能被忽略）。
更直观的是打开 Layers 面板（More Tools → Layers），带 “Stacking context” 标注的图层就是由 opacity、transform 等触发的独立渲染单元。
- 注意：父元素若有
overflow: hidden或clip-path，可能把子元素的层叠上下文“剪掉”，导致视觉上没生效，但 DevTools 仍显示 Yes - 移动端 WebView（尤其旧版 Android）对层叠上下文的处理更保守，有时
opacity: 0.99才稳，0.9可能降级为软件合成 - 不要依赖
will-change: opacity来“修复”层叠行为——它只是提示合成器准备资源，不改变上下文创建逻辑
真正容易被忽略的是：opacity 创建的层叠上下文不可逆，一旦触发，后续所有 z-index 布局都要围绕这个新边界重新设计，而不是简单调大数字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
