移动端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
轴的顺序。