结论：Safari对创建层叠上下文更敏感，transform、opacity、will-change等属性易意外触发局部z-index限制；IE6/7中未设z-index的定位元素默认z-index:0，会截断子元素层级；isolation需兼容前缀且仅对定位元素生效。
直接说结论：不是 CSS 写错了，而是不同浏览器对「创建层叠上下文」的触发条件不一致——尤其是 Safari 对 transform、opacity、will-change 和 isolation 更敏感，稍有不慎就多套一层上下文，把你的 z-index 锁死在局部范围里。
为什么 Safari 里 z-index 总是“低一层”
Safari（特别是 iOS/iPadOS WebKit）会为以下任意一项立刻创建新层叠上下文：transform: translateZ(0)、will-change: transform、opacity: 0.99，甚至 filter: blur(0)。Chrome 和 Firefox 则常容忍这些属性共存而不截断层级。
这意味着：一个 z-index: 10000 的弹窗，只要父容器带了 opacity: 0.9，它就只能跟这个父容器比高低，而不是跟页面其他元素比。
- 用 Safari 开发者工具 → Elements → Styles 面板右侧看是否有 “Stacking Context” 标识
- 临时注释掉疑似祖先元素的
transform或opacity，观察目标元素是否突然“浮上来” - 别用
translateZ(0)做性能优化——现代 Safari 已默认启用 GPU 合成，它只带来副作用 - 若必须用
will-change，只在动画前动态设置will-change: transform，结束后立刻设回will-change: auto
IE6–7 的 z-index 默认值是 0，不是 auto
IE6/7 下，只要元素 position 不是 static（哪怕没写 z-index），就等价于 z-index: 0；而其他浏览器中，未声明 z-index 就是 auto，不参与层叠排序。
立即学习“前端免费学习笔记（深入）”；
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
后果很直接：一个没设 z-index 的 position: relative 父容器，在 IE6/7 中会“挡住”所有子元素的高 z-index。
- 检查所有定位祖先，尤其是包裹弹窗或下拉框的外层
<div>，确保它们要么不设position，要么显式设z-index: auto（仅现代浏览器支持）或合理数值 - 兼容旧 IE 时，避免依赖“未设
z-index就透明”的假设；统一给关键容器加明确z-index值 - 不要靠“父容器不写
z-index就不会截断”来设计逻辑——IE6/7 会打破它
isolation: isolate 在 Safari 15.4+ 才原生支持
isolation: isolate 是少数能主动创建独立层叠上下文的属性，但它在 Safari 15.4（对应 iOS 15.4）之前完全不生效。更麻烦的是，加了前缀也得按顺序写，否则旧版和新版 Safari 都可能忽略。
- 必须补前缀且顺序不能错：
-webkit-isolation: isolate要写在isolation: isolate之前 - 它只对块级或已定位元素生效；加在
<span>或position: static元素上无效 - 如果父容器用了
opacity: 0.99或transform，你的isolation容器会被包进那个“套娃”上下文里，根本成不了根节点 - 用 DevTools Elements 面板右键 → «Show stacking context»，确认目标容器是否真成了根节点
用 @supports 检测层叠上下文能力是否可靠
目前没有标准 CSS 媒体查询或 @supports 规则能直接检测“是否创建了层叠上下文”，但你可以间接判断部分触发条件：
-
@supports (isolation: isolate)可安全启用isolation，但需配合前缀 fallback -
@supports (transform: translateZ(0))不等于“支持层叠上下文”，因为 Safari 会创建，Chrome 可能不创建——它只表示语法被识别 - 真正可靠的判断方式仍是 DevTools 的 «Layers» 面板（Chrome）或 «Stacking Context» 标识（Safari）
- 对关键 UI（如 modal、tooltip），建议用 JS 检测运行时堆叠行为：比如插入测试元素，读取
getComputedStyle(el).zIndex并对比渲染位置
最易被忽略的一点：层叠上下文不是“开关”，而是“嵌套容器”。你改一个 opacity，可能同时影响三层内的所有 z-index 行为，而且这种影响在 Safari 里发生得更早、更隐蔽——调试时得从最外层祖先开始逐层关掉可疑属性，而不是只盯着目标元素本身。
