z-index在safari等浏览器“失效”主因是层叠上下文被意外触发：safari对transform、opacity、will-change极敏感，会立即创建隔离上下文使子元素z-index仅局部生效；chrome/firefox更宽松；ie6–7则将未声明z-index的定位元素默认视为z-index: 0。
z-index 在 Safari、IE 或老版 Chrome 里“失效”，不是写错了，而是层叠上下文边界被不同内核以不同条件触发——Safari（WebKit）对 transform、opacity、will-change 极其敏感，Chrome/Firefox 更宽松，IE6–7 则把未声明 z-index 的定位元素默认当 z-index: 0 处理。
为什么 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；而其他浏览器中，未声明就是 auto，不参与层叠排序。这会导致一个没设 z-index 的 position: relative 父容器，在 IE6/7 中直接“挡住”所有子元素的高 z-index。
- 在兼容老 IE 的项目中，对关键定位容器显式写
z-index: 1或更高值，而非依赖隐式行为 - 避免让父容器仅靠
position: relative就获得z-index: 0—— 改用position: relative; z-index: 1明确意图 - 用
getComputedStyle(el).getPropertyValue('z-index')在控制台验证真实计算值，注意auto和0的语义完全不同
如何用 DevTools 快速定位堆叠上下文边界
Chrome 和 Safari（需开启）都支持直接可视化层叠上下文，这是排错最高效的方式。它能告诉你谁创建了上下文、嵌套关系如何、哪一级开始“关小黑屋”。
- Chrome：右键检查元素 → More Tools → Layers，面板中会标出谁创建了上下文，并显示层级嵌套关系
- Safari：开发者 > 显示 Web 检查器 > 元素 > 右侧 Styles 面板底部查看 “Stacking Context” 提示
- 不要靠肉眼数
z-index数字大小——先确认你看到的数值，是在哪个上下文里生效的
真正麻烦的不是数字写多大，而是你根本不知道自己正在哪个“盒子”里调数字。一旦父级触发了堆叠上下文，再大的 z-index 也跨不出去——这个边界在 Safari 里可能比你预想的更早出现，而且悄无声息。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
