假如只是開發簡單的彈窗效果，懂得通過z-index來調整元素間的層疊關係就夠了。但要將多個彈窗間層疊關係給處理好，那麼充分理解z-index背後的原理及相容性問題就是必要的知識儲備了。本文作為對W3C Recommendation-Layered presentation學習後整理的筆記，以便日後查閱。
由於將英文名詞翻譯為中文名詞容易產生歧義（如Normal flow被翻譯為文檔流），因此本文將直接採用原英文名詞，而涉及到的英文名詞解釋如下：
non-positioned element：無CSS定位的元素，也就是position: static的元素。
positioned element：CSS定位的元素，也就是position: relative/absolute/fixed的元素。
box：文檔樹由element組成，渲染樹由box組成，實際進行元素大小、布局渲染操作的對象是box進行而不是element。box由element對應產生（也有是anonymous box不是由element對應產生，而是渲染器根據規則自動產生），non-positioned element對應的是non-position box，positioned element對應的是position box。
z-axis：box定位座標系中的z軸。
stacking context：層疊上下文，z-axis的基本組成單位。box與stacking context的映射關係為N:1。每個stacking context有一個父context（除了root stacking context外）和0~N個子context。
root stacking context：與根box（html/body對應的box）對應的層疊上下文，是其他stacking context的祖先context，root stacking context的範圍覆蓋整條z-axis。
stack level：層疊等級，當N個box位於同一個stacking context中，則通過stack level來決定它們位於z-axis上的位置。注意：stack level為相對值而非如px那樣為絕對值。
二、圖解分層顯示
其實我們常接觸到的z-index只是分層顯示中的一個屬性而已，而理解z-index背後的原理實質上就是要理解分層顯示原理。下面我們通過一個樣本來認識一下分層顯示涉及的對象和屬性（z-axis、(root) stacking context、box、stack level）以及它們之間的關係。
HTML Markup
<style type="text/css"> p{position:relative;}</style><body> <p id="d1" style="z-index:10;"> <p id="d4" style="z-index:-9999;"></p> </p> <p id="d2" style="z-index:8;"></p> <p id="d3" style="z-index:9;"></p> <p id="p1"><p></body>
說明：
1. 在構造渲染樹時會為element產生對應的box，所以p#d1->d1:box,p#d2->d2:box,p#d3->d3:box,p#d4->d4:box,p#p1->p1:box。
2. 對於positioned box而言，若z-index屬性值不是0，則會建立一個新的stacking context，並且其子孫box將屬於這個新stacking context。
3. 同一個stacking context的z-index才具有可比性，也就是說在討論z-index時必須帶說明是哪個stacking context下的z-index。如樣本般，雖然-9999比10小，但由於d4:box和d1:box位於不同的stacking context，因此無法判斷哪個box更靠近使用者。
三、層疊規則
層疊規則就是決定到底哪個box更靠近使用者。
1. 前提：boxes屬於同一個stacking context，並且z-index相同
規則：按照box對應的element在文檔樹的順序，後者比前者更靠近使用者（back-to-front）
<!-- 兩種情況下，d2均排在d1的後面，因此d2在z-axis上位於d1的上面 --><p id="d1"> <p id="d2"> </p></p><p id="d1"></p><p id="d2"></p
2. 前提：boxes屬於同一個stacking context，並且z-index不同
規則：z-index屬性值大的box更靠近使用者
<!-- d1的z-index為12，而d2的z-index為0，所以d1在d2的上面 --><p id="d1" style="position:relative;z-index: 12;"></p><p id="d2" style="z-index: 0;margin-top:-20px;"></p
3. 前提：boxes屬於不同的stacking context，並且stacking contexts沒有祖孫/父子關係
規則：boxes會向上沿著父box進行搜尋，直到父boxes屬於同一個stacking context為止，然後比較父boxes的z-index屬性值，z-index屬性值大的box更靠近使用者。
<p> <p id="d1" style="position:relative; z-index:10;"> <p id="d4" style="background:red; width:100px; height:100px;position:relative; z-index:9999;">d3</p> </p> <p id="d2" style="background:blue; width:50px; height:50px; position:relative; top: -120px; z-index:9;">d2</p> <p id="d3" style="background:green; width:50px; height:50px; position:relative; top: -80px; position:relative; z-index:11;">d3</p></p>
4. 前提：boxes屬於不同的stacking context，並且stacking contexts為祖孫/父子關係
規則：屬於子stacking context的box必定更靠近使用者
<p style="background:blue; width:100px; height:100px; position:relative; z-index:10;"> <p style="background:red; width:50px; height:50px; position:relative; z-index:-10;"></p></p>
5. 前提：boxes屬於相同的stacking context，並且兩者都是non-positioned element。
規則：float:left|right的元素必定更靠近使用者
四、z-index的作用
囉嗦一句：同一個stacking context的z-index才具有可比性，也就是說在討論z-index時必須帶說明是哪個stacking context下的z-index。
它有兩個作用：1. 設定box在其所屬的stacking context下的stack level；
2. 當z-index屬性值非0時，則在該box中建立一個新的stacking context，而該box的子孫box預設屬於這個新stacking context。
注意：z-index的預設值為auto，自動賦值為0。因此預設情況下不會建立新的stacking context。
z-index生效的閥門
z-index屬性值僅對positioned box生效，而non-positioned box的z-index永遠為0。
也許你會舉出如下反例：
<p id="d1" style="z-index:10;"></p><script type="text/javascript"> console.log(window.getComputedStyle(document.getElementById('d1'))['zIndex']); // 輸出10</script>
但抱歉的是，上面擷取的是non-positioned element p#d1的z-index屬性值，而不是non-positioned box的z-index屬性值。
對於positioned element，它會將z-index賦予給對應的positioned box，而non-positioned element則不會。
五、相容性問題——IE6/7的詭異行為
IE6、7中並非當positioned box並且z-index不為0時才建立stacking context，而是positioned box就會建立stacking context。
<style> .parent{width:200px; height:200px; padding:10px;} .sub{text-align:right; font:15px Verdana;width:100px; height:100px;} .lt50{left:50px;top:50px;}</style> <p style="position:absolute; background:lightgrey;" class="parent"> <p style="position:absolute;z-index:20;background:darkgray;" class="sub">20</p> <p style="position:absolute;z-index:10;background:dimgray;" class="sub lt50">10</p></p> <p style="position:absolute;left:80px;top:80px;background:black;" class="parent"> <p style="position:absolute;z-index:2;background:darkgray;" class="sub">2</p> <p style="position:absolute;z-index:1;background:dimgray;" class="sub lt50">1</p></p>
符合W3C標準的渲染效果：
IE6、7下的渲染效果：
六、總結
若有紕漏請大家指正，謝謝！
尊重原創，轉載請註明來自：http://www.cnblogs.com/fsjohnhuang/p/4333164.html ^_^肥仔John
七、參考
《說說標準——CSS核心可視化格式模型(visual formatting model)之十三：分層的顯示(Layered presentation) 》
《z-index 預設值引起的相容性問題》
W3C Recommendation-Layered presentation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
