苹果手机 z-index 失效
原因：
在苹果手机上， 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; // 父元素必须加这个
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！