z-index引起的血案

出问题的布局大概是这样的：

C的部分由于有其余人想要层叠多个页面，因此每一个页面设置了不一样的z-index，进行显示和隐藏（埋下了地雷）。

而后c-child是在C内部的一个元素，通常时候是不可见的，display：none。

可见的时候是全屏显示：(下面是写在react 的js里的，不是css格式的，意思就是用了fixed)

cChildeStyle:{
        position:"fixed",
        left:0,
        right:0,
        bottom:0,
        top:0,
    }

结果在有些Android app的webview中，出现了异常，c-child不能遮挡住下层的A和B的部分，只能遮挡住C。

我有尝试把c-child的z-index提升，依然是遮挡不住A和B，彻底不生效，而且在C-child滑动，下层能够滚动。（这里我又查了好多滚动穿透的资料，最后采起用代码动态修改body为fixed的,弹出框关闭后还原，见下一篇，不过这是另外一个问题了。）中间绕了不少弯路，折腾了三四天一直找不到症结所在。（好傻啊，差点就放弃了）

最后，我终于找到了一篇阿里大神的文章，这篇文章点醒了我。

http://www.aliued.com/?p=3130

下面摘录总结：

总结

chrome浏览器和移动端基于webkit的浏览器，position:fixed会建立新的层叠上下我，注意对样式的影响。

关于z-index几点常见问题

1. z-index只有在设置了position为relative,absolute,fixed时才会有效。

2. z-index的“从父原则”。当你发现把z-index设的多大都没用时，看看其父元素是否设置了有效的z-index，固然别忘了先看看自身是否设置了position。

3. 不要乱用z-index，不然层叠关系会把你搞晕，且难以维护。只在必要的状况下设置，目前我想到的必要的时候只有：悬浮层、负margin产生的覆盖状况。

position:fixed

发现position：fixed不设置left，top的时候，其默认值并不是0，0。而是根据其父元素边界肯定的，请自行测试，还未具体查看资料。

opacity和visiblity

设置父元素透明，再设置子元素不透明将失效。设置父元素不可见，再设置子元素可见，能够成功。

看完这个，我就意识到多是C区域设置了fixed，或者其余什么属性什么影响到c-child，导致z-index从父，没法越过C与A\B进行比较。因而通过检查，C并无设置fixed，而是用了z-index。其实控制哪一层显示，能够不须要用z-index，毕竟只是彻底遮挡和隐藏，用display控制就行了。因而直接去掉C设置的z-index，全部问题解决！

前端路漫漫，加油！