这个问题我在iOS Safari前端开发中碰过好多次了，咱们来拆解一下背后的核心原因：

硬件加速触发的合成层隔离 #

当你给外层DIV设置-webkit-overflow-scrolling: touch时，iOS Safari会为这个容器开启硬件加速渲染——简单说就是把这个容器和它的子元素单独放到一个GPU管理的合成层里。这个合成层的渲染逻辑是独立于普通DOM流的，它不再和其他非硬件加速的元素共享同一个层叠上下文，所以你设置的z-index自然就失效了。打个比方，这就像把元素放到了另一个独立的画布上，不管你给这个画布设多少z-index，它的显示层级只受GPU渲染队列的影响，和普通DOM的z-index规则脱钩了。

层叠上下文的隐性变化 #

正常情况下，z-index的作用是在同一个层叠上下文里排序元素。但-webkit-overflow-scrolling: touch会强制创建一个新的层叠上下文，而且这个上下文的优先级很高，哪怕你给其他元素设置更高的z-index，只要没进入同一个合成层，也会被这个硬件加速的容器覆盖。

为啥负外边距能解决？ #

负外边距其实是从布局层面绕开了问题：通过调整元素的位置，让它在视觉上“避开”这个硬件加速容器的覆盖范围，本质上是一种规避方案，而非从根源上修复z-index的失效问题。

如果想从根本上处理这个问题，你可以试试这些方案：

• 给需要在上方显示的元素也添加硬件触发属性（比如transform: translateZ(0)），让它们进入同一个合成层，这样z-index就能正常生效了
• 调整DOM结构，避免硬件加速容器和需要控制z-index的元素产生层级交叉

内容的提问来源于stack exchange，提问作者Nastro