关于z-index 层级显示 ios端不生效问题。

项目构建

• webpack + vue + vue-router + vueX + axios + antd of vue

起因

构建项目的时候由于 采用的 antd of vue ui库 ，里面没有类似点击唤醒遮罩层的组件 ，所以自己手写vue组件进行引入 ，主要用的是 css3 z-index 属性 ，通过z-index 值不同进行层级展示。（ ps ：之前处理过类似需求 ，由于用的是vant-ui）里面有自带的组件 所以就引入直接拿来用了。

经过

自认为写的写的代码上面逻辑是没有错误的，可结果却是 以下 。。。。
出现弹窗的时候，滑动底部z-index 属性不起作用。

---

更令人无语的是。。。。这个bug只是在ios端出现，pc端页面调试跟 真机调试时 Android端无任何问题。

处理

思考 ：能引起层级显示出现问题的无非就两种情况

1. 样式冲突
2. 兼容性

因为这个项目构建的时候也引入了 公共的scss库 ，可是既然只有ios端出现问题那就绝不可能是样式冲突，只能是兼容性的问题了。

结果

后面科学上网才知道
…

safrai浏览器是把z-index直接忽略了。

借鉴那位大神的理解大概是：

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

上代码：

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

自此，就解决了。

不少小伙伴可能会不解，加上transform属性对 Android 端有没有影响，事实上基本是不会的。因为浏览器内核不同，所以也导致了界面呈现方式的不同。所以 Android端的也会默认忽略 transform: translateZ(1000px)属性。