opacity 小于 1（如 0.99）会强制创建层叠上下文，使子元素 z-index 仅在内部生效，无法与外部元素比较层级；修复需删除 opacity、提升元素至 body 下，或改用 rgba 背景替代。
opacity 小于 1 会静默创建层叠上下文，把子元素的 z-index 锁死在内部——它根本没法和外部元素比高低，不是值不够大，是“比都没法比”。
为什么 opacity: 0.99 就能让 z-index 彻底失效
只要父容器设置了 opacity 且值小于 1（哪怕 opacity: 0.999），浏览器就会强制创建新的层叠上下文（stacking context）。此时子元素的 z-index 只在该容器内生效，对外部同级元素完全不可见。
常见误判点：
- 以为
opacity: 0.99和opacity: 0.1效果不同 —— 实际上两者触发层叠上下文的行为完全一致 - 以为只改子元素
z-index: 999999就能突围 —— 它连父容器的边界都出不去 - 忽略祖先节点（不一定是直接父级）也可能带
opacity—— 比如一个.card包着.dropdown，而.card有opacity: 0.95
快速定位哪个 opacity 在“建结界”
打开 Chrome DevTools → 选中被遮挡的元素 → 右侧面板 «Computed» 搜索 stacking context。如果某祖先节点显示 This element establishes a stacking context，再点开它，检查 opacity、transform、filter 是否非默认值。
更直观的办法：
- 在 «Elements» 面板中逐级点击父节点 → 右侧 «Layout» 标签页看 «Stacking context» 是否突然变成 Yes
- 临时注释掉疑似父级的
opacity声明 → 遮挡立刻消失，就是它 - 用 «Rendering» 面板 → 勾选 «Show layers panel» → 切到 «Layers» 标签页，直接看到每个层叠上下文对应的 DOM 节点
真正有效的修复方式：删、提、换
不要堆数字，从结构层面解决：
- 如果
opacity只为过渡动画（比如淡入），直接删掉，改用visibility: hidden+transition: opacity延迟触发 —— 最干净 - 必须保留半透明效果？把需要浮出的元素（如
dropdown、tooltip）用 JS 移到document.body下，配合position: fixed手动定位（别忘了监听scroll和resize更新位置） - 想保留 DOM 结构？把
opacity换成background-color: rgba(255, 255, 255, 0.9)（仅适用于背景透明，不影响子元素）
容易被忽略的细节：z-index: 0 和 z-index: auto 不是一回事
很多人给父容器加 position: relative; z-index: 0，以为很安全，其实这等于主动建了个结界 —— z-index: 0 会强制创建新层叠上下文，而 z-index: auto（默认）不会（前提是已定位）。
所以检查时特别注意：
- 父容器是否意外写了
z-index: 0+position: relative - 媒体查询中是否在某个断点里激活了
opacity或transform，导致响应式切换后突然失效 - iOS Safari 对
body或html上的opacity更敏感，可能直接让position: fixed退化为absolute
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
