摘要：與的映射關(guān)系為。與根對(duì)應(yīng)的對(duì)應(yīng)的層疊上下文，是其他的祖先，的范圍覆蓋整條。注意的默認(rèn)值為，自動(dòng)賦值為。對(duì)于，它會(huì)將賦予給對(duì)應(yīng)的，而則不會(huì)。

?假如只是開發(fā)簡(jiǎn)單的彈窗效果，懂得通過z-index來調(diào)整元素間的層疊關(guān)系就夠了。但要將多個(gè)彈窗間層疊關(guān)系給處理好，那么充分理解z-index背后的原理及兼容性問題就是必要的知識(shí)儲(chǔ)備了。本文作為對(duì)W3C Recommendation-Layered presentation學(xué)習(xí)后整理的筆記，以便日后查閱。
?由于將英文名詞翻譯為中文名詞容易產(chǎn)生歧義（如Normal flow被翻譯為文檔流），因此本文將直接采用原英文名詞，而涉及到的英文名詞解釋如下：
?non-positioned element：無CSS定位的元素，也就是position: static的元素。
?positioned element：CSS定位的元素，也就是position: relative/absolute/fixed的元素。
?box：文檔樹由element組成，渲染樹由box組成，實(shí)際進(jìn)行元素大小、布局渲染操作的對(duì)象是box進(jìn)行而不是element。box由element對(duì)應(yīng)生成（也有是anonymous box不是由element對(duì)應(yīng)生成，而是渲染器根據(jù)規(guī)則自動(dòng)生成），non-positioned element對(duì)應(yīng)的是non-position box，positioned element對(duì)應(yīng)的是position box。
?z-axis：box定位坐標(biāo)系中的z軸。
?stacking context：層疊上下文，z-axis的基本組成單位。box與stacking context的映射關(guān)系為N:1。每個(gè)stacking context有一個(gè)父context（除了root stacking context外）和0~N個(gè)子context。
?root stacking context：與根box（html/body對(duì)應(yīng)的box）對(duì)應(yīng)的層疊上下文，是其他stacking context的祖先context，root stacking context的范圍覆蓋整條z-axis。
?stack level：層疊等級(jí)，當(dāng)N個(gè)box位于同一個(gè)stacking context中，則通過stack level來決定它們位于z-axis上的位置。注意：stack level為相對(duì)值而非如px那樣為絕對(duì)值。

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

說明：

在構(gòu)造渲染樹時(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。

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

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

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

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

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

  

  








前提：boxes屬于同一個(gè)stacking context，并且z-index不同
    規(guī)則：z-index屬性值大的box更靠近用戶







前提：boxes屬于不同的stacking context，并且stacking contexts沒有祖孫/父子關(guān)系
    規(guī)則：boxes會(huì)向上沿著父box進(jìn)行搜索，直到父boxes屬于同一個(gè)stacking context為止，然后比較父boxes的z-index屬性值，z-index屬性值大的box更靠近用戶。

  

    
d3
 
  
  
d2
  
d3




前提：boxes屬于不同的stacking context，并且stacking contexts為祖孫/父子關(guān)系
    規(guī)則：屬于子stacking context的box必定更靠近用戶

  





前提：boxes屬于相同的stacking context，并且兩者都是non-positioned element。
    規(guī)則：float:left|right的元素必定更靠近用戶



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

設(shè)置box在其所屬的stacking context下的stack level；

當(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生效的閥門
?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ì)。
五、兼容性問題——IE6/7的詭異行為　　　　　　　　　　　　　　　　
?IE6、7中并非當(dāng)positioned box并且z-index不為0時(shí)才創(chuàng)建stacking context，而是positioned box就會(huì)創(chuàng)建stacking context。

 

  
20
  
10

 

  
2
  
1

?符合W3C標(biāo)準(zhǔn)的渲染效果：

?IE6、7下的渲染效果：

六、總結(jié)　　　　　　　　　　　　　　　　　　　　　　　　　　　　
?若有紕漏請(qǐng)大家指正，謝謝！ 
?尊重原創(chuàng)，轉(zhuǎn)載請(qǐng)注明來自：http://www.cnblogs.com/fsjohnhuang/p/4333164.html  ^_^肥仔John
七、參考　　　　　　　　　　　　　　　　　　　　　　　　　　　　
《說說標(biāo)準(zhǔn)——CSS核心可視化格式模型(visual formatting model)之十三：分層的顯示(Layered presentation) 》
《z-index 默認(rèn)值引起的兼容性問題》
W3C Recommendation-Layered presentation
           
               
                                           
                       
                 
            
                     

                 

                                                                                                                    
                         GPU云服務(wù)器
                                             
                         云服務(wù)器
                                                                                                                                                 
                                      
                     
                    
                                                                                               你理解的html
                                                                                                           你理解中的云服務(wù)器ecs是什么
                                                                                                           廣告聯(lián)盟是真的嗎
                                                                                                           linux系統(tǒng)真的安全嗎
                                                         
                 
               
              
             
               

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
                 
                   
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/115225.html
               
                      
               

                 
                                  
上一篇：【翻譯】用PostCSS改善你的CSS代碼質(zhì)量
  
                                                
                                       
下一篇：純CSS3美化 input 的checkbox 和 radio