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

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;

<div class="father">
   <div class="c1"></div>
   <div class="c2"></div> 
</div>

.father{
   transform-style: preserve-3d;
}
.c1{
  position:absolute;
  transform: translateZ(5px) rotateX(47deg);
}
.c2{
  position:absolute;
  transform: translateZ(10px) rotateX(47deg);
}
.c1, .c2{
    width: 100%;
    height: 150px;
}

如果有任何偏移、旋转等效果，一定要保证两个层高度一致！否则高的层会覆盖高度低的层！