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

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

2. 某個(gè)元素z-index設(shè)的太大，導(dǎo)致始終無(wú)法被遮蓋;

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

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

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

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

先看幾點(diǎn)結(jié)論：

1. 對(duì)于同級(jí)元素，默認(rèn)(或position:static)情況下文檔流后面的元素會(huì)覆蓋前面的;

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

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

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

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

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

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

1. 向上遍歷定位樹(shù)的父節(jié)點(diǎn)直到2個(gè)元素為同級(jí)元素。

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

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

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

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

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

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

最新評(píng)論