苹果手机 z-index 失效

Posted 2021-05-13 青云码上

原因：

在苹果手机上， transform 变换的时候会让 z-index “临时失效”，其实并非 z-index 失效了，只是 z-index 被用在不同的 stacking context 上，而非在默认的 context 上同等地比较层级了。所以 DOM 在 transform 的工程中，DOM 处于一个新的 stacking context 里，z-index 也是相对于这个 stacking context 的，所以表现出来的实际是 stacking context 的层次，动画一结束，DOM 又回到默认的 context 里，这时的 z-index 才是在同一个 context 上的比较。

解决方法：

1、首先在出现层级问题的元素上，z-index的大小通过translateZ来设置层级关系：

transform: translateZ(自身z-index的数值px)

原先的z-index最好继续保留，因为还要考虑到非ios用户吖

2、然后在父元素上添加：

transform-style: preserve-3d; // 父元素必须加这个