safari弹窗被盖住是因父容器触发层叠上下文，如opacity
Chrome正常但Safari弹窗被盖住，先查Stacking Context是否标Yes
只要父容器用了opacity: 0.99或transform: translateZ(0)，iOS Safari（尤其≤16.6）会立刻创建层叠上下文，而Chrome可能忽略。这不是兼容性“差异”，是WebKit对规范的更严格执行。
实操建议：
- 用真机连Safari Web Inspector → Elements面板逐级点父节点 → 右侧Layout标签页看
Stacking context是否显示Yes - 重点盯模态框直接父容器、轮播外层、卡片wrapper——这些地方常为动画加
transform却忘了后果 - 临时给可疑父容器加
position: relative; z-index: 0;（注意必须配position才生效），观察是否恢复；若恢复，说明问题就卡在这层“结界”
DevTools里Computed面板搜不到Stacking context？换Layers面板看边界
Computed面板有时不显式标出Stacking context: Yes，尤其在旧版Chrome或某些动态样式场景下。这时得靠Layers面板肉眼识别上下文“结界”。
实操建议：
- 打开Chrome DevTools →
More Tools → Layers→ 勾选Show layer borders和Paint flashing - 点击被遮挡元素，向上逐级点父节点，看哪一层突然出现深色边框+文字标注
Stacking Context: Yes - 特别注意那些没写
z-index却标了Yes的节点：大概率是opacity: 0.95、filter: blur(0)或will-change: transform在作祟
opacity: 0.99和opacity: 1的行为天差地别，别信“差不多”
opacity: 1不触发层叠上下文，opacity: 0.99一定触发——这个临界点在所有浏览器里都成立，但影响程度不同。Safari最敏感，IE11最顽固，Firefox则对isolation更较真。
实操建议：
- 动画中避免
opacity落在开区间(0, 1)：比如淡入用opacity: 1 → opacity: 0，而不是opacity: 0.99 → opacity: 0 - 不要用
opacity控制交互层级：它只改透明度，不改事件捕获链；半透明遮罩层务必加pointer-events: none - 若必须局部透明，优先用
background-color: rgba(0, 0, 0, 0.2)或color: hsla(0, 0%, 0%, 0.7)，它们不影响层叠上下文
修复时别只删opacity，要收窄上下文范围
删掉opacity可能让UI崩掉，真正要做的，是把参与层叠竞争的元素拉到同一个上下文里，而不是让它们各自为政。
实操建议：
- 把模态框、下拉菜单、Tooltip等关键浮层统一挂到
document.body下（用JS动态移动DOM），脱离原父容器的上下文污染 - 确保所有兄弟浮层的最近共同祖先没有
opacity 、<code>transform、filter——哪怕值是scale(1)或blur(0)也不行 - 对必须保留透明效果的容器，显式加
isolation: isolate，比隐式触发更可控
opacity本身，而是它悄无声息地把整个子树“隔离”进新上下文——这点最容易被忽略。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
