z-index在不同浏览器“不生效”根本原因是层叠上下文创建规则不一致：safari（webkit）对transform、opacity、will-change等属性极敏感，易提前创建新上下文锁死子元素z-index；chrome/firefox更宽松；ie6–7将未声明z-index的定位元素默认视为z-index:0，而现代浏览器为auto。
z-index 在不同浏览器里“不生效”，基本不是写错了数字，而是层叠上下文（stacking context）的创建规则在 Blink（Chrome）、WebKit（Safari）、Gecko（Firefox）甚至旧 IE 中不一致——尤其当祖先元素带 transform、opacity 或 will-change 时。
为什么 Safari 里 z-index 总是“低一层”
Safari（特别是 iOS/iPadOS WebKit）对触发层叠上下文极其敏感：transform: translateZ(0)、will-change: transform、甚至 opacity: 0.99 都会立刻创建新上下文，把子元素的 z-index 锁死在局部范围。Chrome 和 Firefox 则更宽松，常允许这些属性共存而不截断层级。
实操建议：
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 用 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值 - 用
getComputedStyle(el).getPropertyValue('z-index')在控制台验证真实计算值，注意auto和0的语义完全不同
如何用 DevTools 快速定位堆叠上下文边界
Chrome 和 Safari（需开启）都支持直接可视化层叠上下文，这是排错最高效的方式。
实操建议：
- Chrome：右键检查元素 → More Tools → Layers，面板中会标出谁创建了上下文，并显示层级嵌套关系
- Safari：开发者 > 显示 Web 检查器 > 元素 > Styles 面板右侧看是否有 “Stacking Context” 标识
- 临时给疑似“上下文制造者”的父元素加
outline: 1px solid red快速定位
video 和 iframe 为何永远盖在 z-index 最高层
Safari 的 <video></video> 在 iOS/iPadOS 上被强制渲染在原生控件层，不参与标准层叠上下文计算；<iframe></iframe> 在多数浏览器中也使用操作系统级渲染层（OS compositor layer），天然高于普通 DOM 元素。
实操建议：
- 对
<video></video>必须同时设webkit-playsinline、playsinline、transform: translateZ(0)和will-change: transform，且作用于<video></video>自身，并配position: relative与z-index -
webkit-playsinline只控制播放行为，不改变层级；真正起效的是transform + will-change组合触发合成层 - 对
<iframe></iframe>，添加allow="autoplay; fullscreen"并确保其容器z-index不高于 modal；老项目可尝试iframe { wmode="transparent" }（仅部分有效）
真正难处理的不是数值大小，而是层叠上下文的嵌套深度和跨浏览器触发条件差异——比如一个 opacity: 0.99 在 Chrome 里无事，在 Safari 里却让整个弹窗栈失效。调试时优先看上下文边界，而不是调大 z-index。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
