opacity 小于 1 会强制创建层叠上下文，使子元素 z-index 失去跨父级比较能力；动画中 opacity 落入 (0,1) 区间会动态触发上下文切换，导致层级错乱；需避免用 opacity 控制交互层级，必要时将交互元素移至 body 下。
z-index + opacity 组合会意外创建层叠上下文
opacity 小于 1（哪怕只是 opacity: 0.99）会强制触发新层叠上下文（stacking context），导致子元素的 z-index 失去“越级竞争”能力——它只能跟同个父容器下的兄弟比高低，无法盖过外部其他定位元素。
这不是浏览器 bug，而是 CSS 规范明确行为。常见误判是：给弹窗内部按钮设了 z-index: 9999，但弹窗外层加了 opacity: 0.95 做淡入效果，结果按钮被页面顶部导航栏压住——因为两者根本不在同一个层叠上下文中。
- 检查方式：在 Chrome DevTools 中选中该父元素，在 «Computed» 面板搜
Stacking context，若显示 Yes，就是它 - 临时验证：注释掉父级的
opacity，看遮挡是否立刻消失 - opacity: 1 和 opacity: 0.999 的行为天差地别——前者不触发上下文，后者一定触发
opacity 动画期间 z-index 行为可能动态变化
当 opacity 在过渡或动画中变化时，只要中间帧的计算值小于 1（比如从 1 → 0.99 → 0），浏览器就会在那一帧创建临时层叠上下文。如果此时子元素正通过 JS 动态调整 z-index，可能因上下文切换导致层级重置或渲染错乱。
尤其在 Vue/React 中用 class 切换控制显隐时，若 class 含 opacity: 0.99，而另一个 class 是 opacity: 1，切换瞬间就可能引发子元素 z-index “失效”现象。
- 避免在动画关键帧中让 opacity 落入 (0, 1) 开区间；如需过渡，优先用
opacity: 1 → opacity: 0全程整数端点 - 不要依赖 opacity 变化来“激活”或“释放”z-index——它不可靠，且无视觉提示
- 若必须半透明+高交互性（如带遮罩的 Tooltip），把可点击目标元素用 JS 移到
document.body下，脱离原上下文
opacity 与 pointer-events 共同作用导致点击穿透异常
opacity 不影响事件捕获链，opacity: 0.1 的元素依然完整接收鼠标事件。如果它恰好覆盖在按钮上方、又没设 pointer-events: none，用户看似点中按钮，实际触发的是上层半透明容器的 click，造成“点不动”假象。
更隐蔽的是：多个 opacity
- 对纯视觉装饰层（如背景蒙版、动效粒子），务必加
pointer-events: none - 需要部分响应时，只在具体子元素上设
pointer-events: auto，父层保持none - 不要用 opacity 控制“是否可点”——它只管透明度，不管交互权
为什么 z-index: 0 和 opacity: 0.99 一起用特别危险
z-index: 0 本身就会创建新层叠上下文（前提是元素已定位），再叠加上 opacity: 0.99，等于双重锁定——子元素彻底被关进一个孤立盒子，连父容器的 z-index 都难救回来。
而 z-index: auto 不会创建上下文，但很多人误以为它“等于没写”，其实它是安全的默认值；一旦你加了 opacity: 0.99，又没意识到自己同时激活了两层隔离机制，排错成本会指数上升。
- 排查时优先看 computed
z-index是否显示为(not applicable)或灰显 - 避免在同一个元素上同时设置
opacity 和 <code>z-index: 0（除非你明确需要嵌套隔离） - 真正需要统一管理层级时，用 CSS 变量定义基准值，例如：
--z-modal: 1000，然后只在根容器上设z-index: var(--z-modal)，子元素靠结构位置自然落位
opacity: 0.99 却没配 z-index 的父容器——它不报错，不警告，只默默把你精心写的 z-index: 9999 关进小黑屋。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
