opacity小于1会强制创建层叠上下文，使子元素z-index仅在内部生效，无法与兄弟元素跨上下文比层级；应改用rgba()/hsla()实现局部透明以避免此问题。
opacity 会强制创建新的层叠上下文
只要 opacity 值不等于 1（比如 0.99、0.5、0），浏览器就会为该元素创建一个新的层叠上下文（stacking context）。这不是可选行为，而是 CSS 规范强制要求的渲染机制。
一旦创建，这个新上下文就“隔绝”了内部和外部的 z-index 排序：子元素的 z-index 只在该上下文内部起作用，无法越过边界去和父级同级的其他元素比高低。
- 即使子元素设置了
z-index: 9999，它也只在父元素的层叠上下文中排第一，不代表能盖住兄弟元素 - 原本靠 HTML 顺序或全局
z-index控制的层级关系会被打断 - 常见现象：一个
position: relative; z-index: 10的弹窗，如果加了opacity: 0.99，就可能被后面 DOM 顺序更靠后的position: fixed导航栏挡住
为什么 opacity: 0.99 就算“透明”，也会触发层叠上下文？
CSS 标准里没有“半透明才算触发”的阈值。规范明确写的是：opacity 不为 1 即触发。哪怕你写 opacity: 0.999999，浏览器也必须新建上下文——它不看视觉差异，只做数值判断。
这意味着：
-
opacity: 0.99和opacity: 0.1在层叠行为上完全等价，都创建上下文 - 想避免意外层级错乱，就别对需要精确控制 z-order 的元素用
opacity，哪怕只是“轻微淡化” - 动画中用
opacity做淡入淡出时，如果该元素同时参与复杂层叠（如模态框+下拉菜单+悬浮提示），务必提前检查是否被压住
opacity 创建的层叠上下文 vs position + z-index 创建的有何不同？
两者都能创建层叠上下文，但触发条件和副作用不同：
-
position: relative/absolute/fixed+z-index≠auto：只影响自身及后代的层叠顺序，不改变透明度 -
opacity≠1：既创建上下文，又让整个渲染盒子（含边框、背景、文字、所有子节点）统一降 alpha，且不可逆 - 二者叠加时，opacity 的上下文优先级更高——即使父元素
z-index: 100，只要它有opacity: 0.9，它的子元素就无法靠z-index: 999跑到同级兄弟元素上面
真正要控制局部透明，该用什么替代 opacity？
如果目标只是让背景或文字变半透，又不想牵连子元素或破坏层级，直接换颜色函数：
- 背景半透 → 用
background-color: rgba(0, 0, 0, 0.5)或hsla(0, 0%, 0%, 0.5) - 文字半透 → 用
color: rgba(255, 255, 255, 0.7) - 边框半透 → 用
border-color: rgba(128, 128, 128, 0.3) - 这些写法只改对应属性的 alpha 通道，不影响子元素，也不触发层叠上下文
只有当你确实需要整个容器（含子内容）一起渐隐/渐显，才该用 opacity——但得接受它附带的层叠上下文代价。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
