z-index層級的小小學問

時間 2019-11-09

標籤 index 層級小小學問简体版

原文原文鏈接

在平常開發中，咱們常常須要用到z-index這個屬性來實現一些浮層層疊的交互，z-index的屬性值有auto和nubmer數字2種，數值越大，層級越高，看上去很好理解，很好使用。但實際上，咱們在使用中仍會遇到一些讓人疑惑的問題。chrome

疑惑：爲啥我這個浮層設的z-index比另一個高，卻怎麼仍是在它的下面啊？瀏覽器

首先，咱們仍是要明確下幾種瀏覽器是如何對z-index解析的，以及結合瀏覽器是如何渲染頁面的。佈局

ie瀏覽器對於沒有設置z-index屬性的元素，默認是以z-index爲0來渲染的，參與z-index的比較；
ff和chrome對於沒有設置z-index屬性的元素，默認是以z-index爲auto來渲染的，不參與z-index的比較；
瀏覽器渲染頁面是順序渲染元素的，排除定位和float佈局，定位和float佈局的元素是在順序渲染後，再浮動的；
ie下，z-index依賴於同級比較，也就是說，假設A，B是兩個同級元素，A有子節點C，B有子節點D，A是B的後面的一個兄弟節點，B中的D經過絕對定位浮到A上，D設z-index爲10，A中的C也用了絕對定位。但沒設z-index，或者設了比10小的z-index，在ie下結果是C覆蓋了D，而chrome和ff則是D蓋住了C。

.a{width:200px;height:200px;background:red;position:relative;}
.b{width:200px;height:100px;background:blue;position:relative;}
.c{width:110px;height:100px;background:yellow;position:absolute;top:-100px;left:20px;z-index:1}
.d{width:100px;height:100px;background:green;position:absolute;top:10px;left:10px;z-index:10}開發

<body>
<div class="b"><div class="d">d</div></div>
<div class="a"><div class="c">c</div></div>
</body>it

根本緣由就是chrome和ff他們父節點沒有設置z-index，不參與層級pk，c和d就按照自身的z-index大小pk，因此d蓋住c；而ie下，父節點沒有設置z-index，會以z-index：0參與比較，而a和b同級節點z-index都是0（都沒有設置z-index屬性），層級同樣，則按前後順序覆蓋了，即c蓋住d；若是給b設置z-index:1，則結果相反。io

　　5. 經過父節點設置position：relative，能夠把父元素的z-index屬性做用到子節點上，若是層級很深的話能夠這樣作。class

經過了解上面幾點，咱們應該就清楚了爲何層級有時候「不受控制」。容器

另外：在在開發浮層組件，若是bubble，panel等的時候，不要插入到使用的容器元素裏，而應該往body中插入，這樣就能把元素跑到外層，z-index設置的就很容易參與比較了，而不會被「平白無故」的被覆蓋。渲染

我的理解，若是不許確的地方，還望不吝指點！謝謝！float