z-index在不同浏览器中表现不一致，根本原因是各浏览器对创建层叠上下文的判定标准不同：safari（webkit）对transform、opacity、will-change等属性更敏感，易提前创建新上下文，使子元素z-index被锁死在局部范围；chrome/firefox则更宽松；ie6–7将未声明z-index的定位元素默认视为z-index: 0，而现代浏览器为auto，导致层级遮挡差异。
z-index 在不同浏览器里表现不一致，不是 CSS 写错了，而是各浏览器对“何时创建堆叠上下文”的判定标准不同——尤其在 Safari（WebKit）和旧版 IE 中，transform、opacity、will-change 等属性更容易触发新上下文，把子元素的 z-index 锁死在局部范围。
为什么 Safari 里 z-index 总是“低一层”
Safari（特别是 iOS/iPadOS WebKit）对创建堆叠上下文极其敏感：transform: translateZ(0)、will-change: transform、甚至 opacity: 0.99 都会立刻创建新上下文。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。
实操建议：
- 在兼容老 IE 的项目中，对关键定位容器显式写
z-index: auto（虽然 IE6/7 不识别，但可作语义提示） - 避免让父容器仅靠
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” 提示（部分版本需启用 Experimental Features）
- 临时给疑似“上下文制造者”的父元素加
outline: 1px solid red快速定位 - 在 Computed 面板搜
z-index，如果显示为 “(not applicable)” 或灰显，说明该元素不在定位上下文中，或其父级已隔离层级
真正难的不是调大一个数字，而是看清当前 DOM 树里到底有几个堆叠上下文、谁包裹了谁、哪个祖先悄悄把你的弹窗“关进盒子”里了。浏览器之间差异最大的，从来不是 z-index 值本身，而是那个看不见、摸不着、却决定一切的上下文边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
