safari中z-index“总低一层”的根本原因是其对层叠上下文触发更激进：opacity
z-index 在 Safari 里“总低一层”是因为层叠上下文触发太早
根本原因不是 Safari 解析错了，而是它对创建层叠上下文（stacking context）的条件更激进：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。
实操建议：
- 必须给 DOM 路径上第一个
position不为static的祖先显式设置z-index（哪怕只是z-index: 1） - 不能只靠最深层子元素硬调高值；也不能只给祖父级设，漏掉中间某一层
- 优先用
position: relative; z-index: 1，避免用absolute或fixed——前者易偏移，后者在 IE6 中根本不支持
z-index 失效的真正起点：元素根本没定位
z-index 只对 position 为 relative、absolute、fixed 或 sticky 的元素生效。static（默认值）下设 z-index 完全被忽略。很多“失效”案例其实连这个前提都没满足。
实操建议：
- 检查目标元素的
position是否显式设置，不要依赖默认值 - Chrome DevTools 的 “Computed” 面板里搜
z-index，如果显示auto，说明当前未激活定位上下文 - 父容器是
position: relative，子元素用absolute+z-index才在该层叠上下文内生效
层叠上下文才是真正的分水岭，不是 z-index 数字大小
浏览器不是全局比 z-index 数值大小，而是按层叠上下文分组计算。一旦某个元素创建了新层叠上下文（比如 opacity: 0.99、transform: translateZ(0)、will-change: transform、或带 z-index 的定位元素），它内部所有子元素的 z-index 都只在该上下文内比较，无法越过边界和外部元素直接竞争。
典型场景：
- 模态框被一个半透明卡片（
opacity: 0.9）盖住，哪怕模态框z-index是 10000，卡片只要触发了新层叠上下文，就可能整体压在上面 - 用 Chrome DevTools 的 “Layers” 面板（需开启）可直观看到层叠上下文边界
- 避免无意义触发层叠上下文：慎用
opacity小于 1、filter、transform（尤其translateZ）等隐式创建上下文的属性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
