IOS safari浏览器中出现的z-index不生效的层级问题

出现的问题：

使用全屏遮罩层时遮不住导航栏，或者是弹窗时被导航栏覆盖，弹窗在导航栏下方
此情况仅IOS端出现，安卓和PC端正常，考虑IOS兼容性问题

1.为什么会出现层级不生效

原因1

谷歌，火狐等浏览器都是直接将一个盒子理解成一块一块的，想分层就按照你的z-index高低来区分，而safari不是，safari是将整个浏览器的页面看成一个整体，虽然也是一块一块的，但是他的分层是按照视觉感来分层的，它认为在下面的代码块总比在上面的代码块离人的眼睛近，所以就应该覆盖在上面的代码块上面，不应该用z-index来区分，而是应该用视觉来区分

.mask {
    z-index: 999; /*这里是给chrome用的*/
    transform: translateZ(1000px); /*这里是给safari用的*/
}

原因2

在safari浏览器中有个独有的属性 ，就是弹性滑动：-webkit-overflow-scrolling: touch
如果使用了这个属性，也会造成z-index不生效
解决方式更加简单，设置成unset即可

-webkit-overflow-scrolling: unset;

本次解决方法

本次遇到的遮罩层时遮不住导航栏的问题，应当是第一种原因，因为使用了Vant框架的ImagePreview组件，所以直接将组件挂载到body节点即可

<van-image-preview 
	getContainer="body"
	v-model="show" 
	:images="images" 
	@change="onChange">
  <template v-slot:index>第{{ index }}页</template>
</van-image-preview>

如果你是用的是Overlay 遮罩层，Overlay 没有提供挂载属性，你可以将Overlay 放在image-preview的cover插槽内。