多次在項(xiàng)目中遇到html頁(yè)面元素的非期待重疊錯(cuò)誤，多數(shù)還是position定位情況下z-index的問(wèn)題。其實(shí)每次解決類(lèi)似問(wèn)題思路大致都是一樣的，說(shuō)到底還是對(duì)z-index的理解比較模糊，可以解決問(wèn)題卻不大了解其原因，導(dǎo)致重復(fù)出錯(cuò)......于是決定把重疊問(wèn)題弄清下，把z-index理順下。

經(jīng)過(guò)一番查找對(duì)比實(shí)踐理解，下面就從元素重疊的背景常識(shí)及可能原因說(shuō)起，淺談下position定位元素的z-index順序?？偨Y(jié)下我目前的理解，希望也能對(duì)遇到過(guò)類(lèi)似問(wèn)題有同樣疑惑的你有一點(diǎn)幫助或啟發(fā)。

元素位置重疊的背景常識(shí)

(x)html文檔中的元素默認(rèn)處于普通流（normal flow）中，也就是說(shuō)其順序由元素在文檔中的先后位置決定，此時(shí)一般不會(huì)產(chǎn)生重疊（但指定負(fù)邊距可能產(chǎn)生重疊）。當(dāng)我們用css為某個(gè)元素指定float浮動(dòng)或者position定位后，元素的定位將會(huì)依情況發(fā)生如下改變：

1. 指定float值left/right

行內(nèi)元素也會(huì)隱形變成塊元素，元素會(huì)脫離文檔的普通流，向左或右浮動(dòng)，直到其外邊緣碰到包含框或另一個(gè)浮動(dòng)框。

2. 指定position值relative

可以相對(duì)于其在普通流中的位置偏移，原本所占的空間仍保留。

3. 指定position值absolute

行內(nèi)元素也會(huì)隱形變成塊元素，元素會(huì)脫離文檔的普通流，相對(duì)于最近的已定位祖先元素偏移，如果元素沒(méi)有已定位的祖先元素，那么它的位置相對(duì)于最初的包含塊偏移。

4. 指定position值fixed

元素會(huì)脫離文檔的普通流，相對(duì)于瀏覽器窗口偏移，固定在瀏覽器的某個(gè)位置。

以上四種情況下，文檔中的元素都將可能被浮動(dòng)/定位元素覆蓋產(chǎn)生重疊。

元素位置重疊的可能原因

1. 負(fù)邊距/float浮動(dòng)

margin為負(fù)值時(shí)元素會(huì)依參考線(xiàn)向外偏移。margin-left/margin-top的參考線(xiàn)為左邊的元素/上面的元素（如無(wú)兄弟元素則為父元素的左內(nèi)側(cè)/上內(nèi)側(cè)）,margin-right和margin-bottom的參考線(xiàn)為元素本身的border右側(cè)/border下側(cè)。一般可以利用負(fù)邊距來(lái)就行布局，但沒(méi)有計(jì)算好的話(huà)就可能造成元素重疊。堆疊順序由元素在文檔中的先后位置決定，后出現(xiàn)的會(huì)在上面。

浮動(dòng)元素會(huì)脫離文檔的普通流，有可能覆蓋或遮擋掉文檔中的元素。

2. position的relative/absolute/fixed定位

當(dāng)為元素設(shè)置position值為relative/absolute/fixed后，元素發(fā)生的偏移可能產(chǎn)生重疊，且z-index屬性被激活。z-index值可以控制定位元素在垂直于顯示屏方向（Z 軸）上的堆疊順序（stack order），值大的元素發(fā)生重疊時(shí)會(huì)在值小的元素上面。

3. window窗口元素引發(fā)的重疊

瀏覽器解析頁(yè)面時(shí)，先判斷元素的類(lèi)型：窗口元素優(yōu)于非窗口元素顯示（也就是窗口元素會(huì)覆蓋在其它非窗口元素之上），同為非窗口類(lèi)型才能在激活z-index屬性控制堆疊順序。

Flash元素屬于window窗口元素

所以如果頁(yè)面上flash元素和其他元素發(fā)生重疊，需要先將flash嵌入的wmode屬性的window（窗口，默認(rèn)的會(huì)造成上面所說(shuō)的問(wèn)題）改為非窗口模式：opaque（非窗口不透明）或者 transparent（非窗口透明）。

ie6下select屬于window類(lèi)型控件

同理，它也產(chǎn)生窗口元素的遮擋問(wèn)題。解決方法使用iframe（原理：ie6下普通元素?zé)o法覆蓋select，iframe可以覆蓋select，普通元素可以覆蓋iframe）/用div模擬實(shí)現(xiàn)select的效果。我一般會(huì)為被select遮擋的div在內(nèi)部追加（appendChild）一個(gè)空的子iframe，設(shè)置position:absolute脫離文檔流空間、width:100%;height:100%;覆蓋整個(gè)父div、z-index:-1;確保值要小于父div的z-index值讓父div覆蓋顯示在iframe上面，借助這個(gè)iframe來(lái)覆蓋select。

淺說(shuō)position定位及z-index使用

使用前提

z-index只能在position屬性值為relative或absolute或fixed的元素上有效。

基本原理

z-index值可以控制定位元素在垂直于顯示屏方向（Z 軸）上的堆疊順序（stack order），值大的元素發(fā)生重疊時(shí)會(huì)在值小的元素上面。

使用的相對(duì)性

z-index值只決定同一父元素中的同級(jí)子元素的堆疊順序。父元素的z-index值（如果有）為子元素定義了堆疊順序（css版堆疊“拼爹”）。向上追溯找不到含有z-index值的父元素的情況下，則可以視為自由的z-index元素，它可以與父元素的同級(jí)兄弟定位元素或其他自由的定位元素來(lái)比較z-index的值，決定其堆疊順序。同級(jí)元素的z-index值如果相同，則堆疊順序由元素在文檔中的先后位置決定，后出現(xiàn)的會(huì)在上面。

所以如果當(dāng)你發(fā)現(xiàn)一個(gè)z-index值較大的元素被值較小的元素遮擋了，請(qǐng)先檢查它們之間的dom結(jié)點(diǎn)關(guān)系，多半是因?yàn)槠涓附Y(jié)點(diǎn)含有激活并設(shè)置了z-index值的position定位元素。

也因?yàn)檫@個(gè)相對(duì)性，還會(huì)引發(fā)瀏覽器表現(xiàn)不一致出現(xiàn)兼容問(wèn)題。原因是ie6、7下面position值為非static的元素在未設(shè)置z-index值的情況下都會(huì)被隱含添加z-index:0，而Firefox/Chrome等現(xiàn)代瀏覽器會(huì)遵循標(biāo)準(zhǔn)默認(rèn)z-index:auto不會(huì)產(chǎn)生值。

還有一點(diǎn)需要注意，負(fù)值的z-index也依照大小比較的原理，但一般來(lái)說(shuō)負(fù)值的z-index會(huì)被透明的body覆蓋導(dǎo)致點(diǎn)擊等事件響應(yīng)出現(xiàn)問(wèn)題，請(qǐng)謹(jǐn)慎使用。

圖解分層顯示                                                                         

  其實(shí)我們常接觸到的z-index只是分層顯示中的一個(gè)屬性而已，而理解z-index背后的原理實(shí)質(zhì)上就是要理解分層顯示原理。下面我們通過(guò)一個(gè)示例來(lái)認(rèn)識(shí)一下分層顯示涉及的對(duì)象和屬性（z-axis、(root) stacking context、box、stack level）以及它們之間的關(guān)系。

HTML Markup

說(shuō)明：

1. 在構(gòu)造渲染樹(shù)時(shí)會(huì)為element生成對(duì)應(yīng)的box，所以div#d1->d1:box,div#d2->d2:box,div#d3->d3:box,div#d4->d4:box,p#p1->p1:box。

2. 對(duì)于positioned box而言，若z-index屬性值不是0，則會(huì)創(chuàng)建一個(gè)新的stacking context，并且其子孫box將屬于這個(gè)新stacking context。

3. 同一個(gè)stacking context的z-index才具有可比性，也就是說(shuō)在討論z-index時(shí)必須帶說(shuō)明是哪個(gè)stacking context下的z-index。如示例般，雖然-9999比10小，但由于d4:box和d1:box位于不同的stacking context，因此無(wú)法判斷哪個(gè)box更靠近用戶(hù)。

層疊規(guī)則　　　　　　　　　　　　　　　　　　　　　　　　　　

層疊規(guī)則就是決定到底哪個(gè)box更靠近用戶(hù)。

1. 前提：boxes屬于同一個(gè)stacking context，并且z-index相同

      規(guī)則：按照box對(duì)應(yīng)的element在文檔樹(shù)的順序，后者比前者更靠近用戶(hù)（back-to-front）

2. 前提：boxes屬于同一個(gè)stacking context，并且z-index不同

規(guī)則：z-index屬性值大的box更靠近用戶(hù)

3. 前提：boxes屬于不同的stacking context，并且stacking contexts沒(méi)有祖孫/父子關(guān)系

      規(guī)則：boxes會(huì)向上沿著父box進(jìn)行搜索，直到父boxes屬于同一個(gè)stacking context為止，然后比較父boxes的z-index屬性值，z-index屬性值大的box更靠近用戶(hù)。

4. 前提：boxes屬于不同的stacking context，并且stacking contexts為祖孫/父子關(guān)系

      規(guī)則：屬于子stacking context的box必定更靠近用戶(hù)

z-index的作用　　　　　　　　　　　　　　　　　　　　　　　　

  啰嗦一句：同一個(gè)stacking context的z-index才具有可比性，也就是說(shuō)在討論z-index時(shí)必須帶說(shuō)明是哪個(gè)stacking context下的z-index。

  它有兩個(gè)作用：1. 設(shè)置box在其所屬的stacking context下的stack level；

                      2. 當(dāng)z-index屬性值非0時(shí)，則在該box中創(chuàng)建一個(gè)新的stacking context，而該box的子孫box默認(rèn)屬于這個(gè)新stacking context。

  注意：z-index的默認(rèn)值為auto，自動(dòng)賦值為0。因此默認(rèn)情況下不會(huì)創(chuàng)建新的stacking context。

  z-index生效的閥門(mén)

    z-index屬性值僅對(duì)positioned box生效，而non-positioned box的z-index永遠(yuǎn)為0。

    也許你會(huì)舉出如下反例：

    但抱歉的是，上面獲取的是non-positioned element div#d1的z-index屬性值，而不是non-positioned box的z-index屬性值。

    對(duì)于positioned element，它會(huì)將z-index賦予給對(duì)應(yīng)的positioned box，而non-positioned element則不會(huì)。

最新評(píng)論