移动端 transform导致设置的z-index属性的层级关系失效

移动端开发时很多效果会用到css3来实现 设置的层级关系会用z-index来实现 在浏览器中看起来没问题 但是到移动端后发现设置的z-index属性失效 

具体原因请看这片博客 https://www.cnblogs.com/reaf/p/5788781.html

引用里面的话

“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 上的比较。”

具体解决方案 可以通过translateZ()来实现z-index的效果 代码如下

z-index的大小通过translateZ来设置层级关系 即可解决问题 但是需要在父元素上添加

transform-style: preserve-3d;

文章引用如有侵权请告知 谢谢。