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，全部問題解決！

前端路漫漫，加油！