根本原因是不同浏览器对创建层叠上下文的触发条件不一致：Safari（尤其iOS/iPadOS WebKit）对transform、opacity、will-change等属性极其敏感，易意外创建局部层叠上下文，使z-index仅在内部生效；IE6/7中未设z-index的定位元素默认z-index:0，会截断子元素层级；Firefox对isolation和contain更严格。
z-index 在不同浏览器里表现不一致，基本可以断定是某个祖先元素在特定浏览器中意外创建了层叠上下文，而不是数值写小了或顺序错了。
Chrome 正常但 Safari 弹窗被盖住
iOS Safari（尤其 ≤ 16.6）对 transform 和 opacity 的层叠上下文触发更激进：哪怕只是 transform: translateZ(0) 或 opacity: 0.999，它就立刻建“结界”，而 Chrome 可能忽略。
- 用真机打开 Safari 开发者工具 → Elements 面板逐级点父节点 → 右侧 Layout 标签页看
Stacking context是否标为 Yes - 重点盯住模态框的直接父容器、卡片容器、轮播外层 —— 这些地方常偷偷加了
transform做动画或硬件加速 - 临时给可疑父容器加
position: relative; z-index: 0;（注意：z-index: 0必须配position才生效，且会创建上下文，但至少可控） - 别只靠
translateZ(0)，改用will-change: transform+ 显式z-index更稳妥
IE11 或旧版 Edge 中 z-index 完全不响应
IE11 对层叠上下文边界极其敏感，且不支持 position: sticky，还拒绝给 <table> 相关元素（tr、td）应用 z-index。
- 检查目标元素是否落在
table结构内 —— 是的话，必须在外层包一层<div>并设position: relative - 确认所有参与层级竞争的元素，其最近共同祖先不能带
opacity < 1、filter、transform，哪怕值是blur(0)或scale(1) - 避免用
z-index: -1：IE 下它会让元素沉到父边框之下，视觉上“消失” - 用
getComputedStyle(el).zIndex在控制台打印实际值，IE 有时会把auto解析成字符串"auto"而非"0"，影响逻辑判断
Firefox 中下拉菜单突然被 header 盖住
Firefox 对 isolation: isolate 和 contain: paint 的上下文触发比 Chrome 更严格，某些 UI 库（如早期 Ant Design）默认加了这些属性。
立即学习“前端免费学习笔记（深入）”；
- 在 Firefox DevTools 的 Computed 面板搜
isolation或contain，看是否有父元素显式设了这些值 - 第三方 CSS 里常见陷阱：
.ant-dropdown { isolation: isolate; }—— 这会让整个下拉树被锁死在一个新上下文里 - 覆盖方式不是删掉，而是加
isolation: auto !important或直接提升该容器的z-index（需同步position: relative） - 如果用了
display: grid容器，检查其子项是否同时有transform—— Firefox 下二者叠加极易触发双重上下文
真正难调的从来不是 z-index 数值本身，而是你根本没意识到那个加了 opacity: 0.99 的卡片容器，已经在 Safari 里悄悄建了个国中之国——它的子元素再怎么喊 z-index: 999999，也出不了门。
