移动端ios上弹窗loading被隐藏
控制元素层级可通过z-index和transform来实现。
1、通过z-index控制z轴，需要配合position属性，且position的属性值为relative、absolute、fixed和sticky时。并且给z-index显式的设置数值，数值越大，其层级越高。简单点说，数值越高，元素越在顶上。
2、transform可以通过它的translateZ()来改变元素的层叠顺序，其值越大，越在顶层，离屏幕越近。不过通过transform:translateZ()改变元素z轴的层级，必须在元素的父元素中显示的设置transform-style: preserve-3d或者在transform中显示的设置perspective()。
问题：
ios上transform:translateZ(100px) 居然能作用在zindex上，在安卓则正常。
在ios上如果祖先元素没有overflow:hidden/scroll/auto等限制，则会直接忽略自身和其他元素的z-index层叠顺序设置，而直接使用真实世界的3D视角进行渲染。
解决方案：
-
方法1：父级，任意父级，非
body级别，设置overflow:hidden可恢复和其他浏览器一样的渲染 -
方法2：都使用3D transform变换。transform: translateZ(100px);
- 方法3：都使用z-index控制
注意：
z-index配合伪元素::before或者::after时让其z轴在元素的底部，特别是碰到大的元素渲染(比如全屏背景图)，会直接影响性能，特别是在移动端，会造成客户端闪退，也就是大家所说的Crash，给用户造成非常不好的体验。
因而推荐通过transform中的translateZ() 或者translate3d()来控制z轴的顺序。
