關(guān)于z-index，目前遇到的一些問題

1. 某些瀏覽器下元素層級遮蓋存在bug;

2. 某個元素z-index設的太大，導致始終無法被遮蓋;

3. js動態(tài)計算z-index，導致元素覆蓋關(guān)系部可控

層級遮蓋bug出現(xiàn)的原因：

IE6/7對z-index的表現(xiàn)跟IE8及以上瀏覽器不一致。position值為非static時，如果不設置z-index屬性，IE6/7下z-index默認為0，而IE8及以上瀏覽器z-index為auto，且zindex:auto的元素不參與堆疊優(yōu)先級比較。

 層級關(guān)系的比較：

先看幾點結(jié)論：

1. 對于同級元素，默認(或position:static)情況下文檔流后面的元素會覆蓋前面的;

2. 對于同級元素，position不為static且z-index存在的情況下z-index大的元素會覆蓋z-index小的元素，即z-index越大優(yōu)先級越高;

3. IE6/7下position不為static，且z-index不存在時z-index為0，除此之外的瀏覽器z-index為auto

4. z-index為auto的元素不參與層級關(guān)系的比較，由向上遍歷至此且z-index不為auto的元素來參與比較。

在上面2點結(jié)論的基礎(chǔ)上，我們引入“定位樹”(非w3c官方詞匯)的概念來做層級的比較。

在定位樹這個概念下，瀏覽器在渲染dom節(jié)點時，除了生成dom樹之外，還會根據(jù)dom樹中的定位元素(position不為static)生成“定位樹”：
dom樹、定位樹對比如下(其中邊上有紅色圓圈的表示該元素position不為static)：

可以這樣理解：定位樹中包含了dom樹中position不為staitc的全部元素。非同級元素比較層級關(guān)系可以這樣比較：

1. 向上遍歷定位樹的父節(jié)點直到2個元素為同級元素。

2. 根據(jù)上面的結(jié)論來最最后的比較。層級高的元素會越靠近用戶的顯示器并能覆蓋層級低的元素。

實例一：假設上圖中所有標紅色元素position都不為static;且z-index=1，根據(jù)上面的比較規(guī)則可以知道：

1. c > (b && b *) > (a && a *) 即元素c及c的所有定位元素層級比a、b高

2. m > h、 g > k、d > m

實例二：假設a的position不為static，z-index屬性不存在，定位樹中a的子元素z-index一次分別為1,2,3,4...其它定位元素z-index:1：

1. 根據(jù)結(jié)論三有：IE6/7下 b > (a && a *) 即元素b的層級比a及a的所有定位元素層級高，其它瀏覽器下：i > h > b > d

最新評論