在 CSS 中，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在层叠行为上没有本质区别，都会创建新的层叠上下文- 如果页面中有需要精确控制层级关系的元素，就应尽量避免直接使用
opacity，哪怕只是做轻微透明处理 - 在动画中使用
opacity做淡入淡出时，若该元素还参与复杂的 CSS 层级结构，比如模态框、下拉菜单、悬浮提示同时存在，就要提前检查是否会出现被覆盖的问题
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？
如果你的目标只是让背景、文字或边框呈现半透明效果，同时又不希望影响子元素显示或破坏 CSS 层级关系，更推荐直接使用颜色函数来处理透明度：
- 背景半透明 → 使用
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；但同时也要意识到，它会附带创建层叠上下文这一代价。
