（注1：如果有問題歡迎留言探討，一起學(xué)習(xí)！轉(zhuǎn)載請注明出處，喜歡可以點(diǎn)個(gè)贊哦！）
（注2：更多內(nèi)容請查看我的目錄。）
1. 重疊與覆蓋
前面我們一直提到，不同的元素產(chǎn)生的盒有可能發(fā)生重疊，那么在這種情況下，哪個(gè)盒子會最終展示給用戶看呢？在CSS入門系列文章 CSS入門11-定位與覆蓋中我們對不同元素生成的盒的重疊情況作了比較與分析，講到了z-index屬性，這一節(jié)我們引入兩個(gè)新的關(guān)鍵詞，堆疊級別stack level和堆疊上下文stack context。
注：這里stack我翻譯成了堆疊，沒有翻譯成堆棧或者層次。你也可以翻譯為層疊級別和層疊上下文（這里的層疊和CSS入門系列中提到的三大特性之層疊性是有區(qū)別的，準(zhǔn)確說那里的層疊性是指選擇器的層疊性），或者堆棧級別和堆棧上下文，這點(diǎn)取決于你的理解和習(xí)慣。這也是我對一些名詞經(jīng)常會直接使用英文的原因，避免歧義。
2. 堆疊上下文 stack context 和堆疊級別 stack level
在CSS 2.2中，每個(gè)盒都有三個(gè)維度的位置。除了它們的水平和垂直位置之外，盒子還會沿著一個(gè)“z軸”放置，并且一個(gè)在另一個(gè)的頂部。盒子在在視覺上的重疊效果顯示與Z軸位置相關(guān)。
堆疊上下文用以描述渲染樹rendering tree被繪制到畫布上的順序。堆疊上下文可以包含更多堆疊上下文。從其父級堆疊上下文的角度來看，堆疊上下文是原子的。其他堆疊上下文中的盒子不能出現(xiàn)在該堆疊上下文的任何盒子之間。
如圖：堆疊上下文1 (Stacking Context 1)是由文檔根元素形成的。 堆疊上下文2和3 (Stacking Context 2, 3) 都是堆疊上下文1 (Stacking Context 1) 上的堆疊層。 他們各自也都形成了新的堆疊上下文，其中包含著新的堆疊層。
每個(gè)盒子都屬于一個(gè)堆疊上下文。在給定堆疊上下文中的每個(gè)定位框都有一個(gè)整數(shù)的堆疊級別，通過與同一堆棧上下文中其他盒子堆棧級別比較得出其在z軸的位置。具有較高堆疊級別的盒始終格式化在較低堆疊級別的盒之前（“在...之前”表示“在用戶面對屏幕時(shí)更靠近用戶”）。盒子可能有負(fù)的堆疊級別。根據(jù)文檔樹的順序，在堆疊環(huán)境中具有相同堆疊級別的盒按照先后順序堆疊。
根元素形成根堆疊上下文。其他堆疊上下文由具有非'auto'的'z-index'計(jì)算值的任何定位元素（包括相對定位元素）生成。堆疊上下文不一定與包含塊有關(guān)。在未來CSS級別中，其他屬性可能會引入堆疊上下文，例如“ 不透明度opacity ” [CSS3COLOR]。
3. z-index屬性
對于一個(gè)定位盒positioned box，屬性z-index用于指定：
- 當(dāng)前堆疊上下文中盒的堆疊級別。
- 該盒是否會創(chuàng)建堆疊上下文。
z-index取值有如下含義：
-
<integer>
此整數(shù)是當(dāng)前堆疊上下文中生成的盒的堆棧級別。該盒還創(chuàng)建了一個(gè)新的堆疊上下文。 - auto
當(dāng)前堆棧上下文中生成的盒的堆棧級別為0。如果該盒具有'position：fixed'或者它是根，那么也會創(chuàng)建一個(gè)新的堆疊上下文。
4. 堆疊順序
在每個(gè)堆疊上下文中，以下圖層按照從后到前的順序進(jìn)行繪制：
- the background and borders of the element forming the stacking context.
- the child stacking contexts with negative stack levels (most negative first).
- the in-flow, non-inline-level, non-positioned descendants.
- the non-positioned floats.
- the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
- the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
- the child stacking contexts with positive stack levels (least positive first).
在每個(gè)堆疊上下文中，繪制堆棧級別為0（在層6中），未定位的浮動（第4層），行內(nèi)塊（第5層）和行內(nèi)表（第5層）中的定位元素，就好像這些元素本身產(chǎn)生了新的堆疊上下文，除了它們的定位后代和任何可能的子堆疊上下文也參與當(dāng)前的堆疊上下文。
注：關(guān)于這篇文章的知識點(diǎn)，我推薦大家閱讀前端大神張鑫旭的這篇blog深入理解CSS中的層疊上下文和層疊順序
參考
https://www.w3.org/TR/CSS22/visuren.html#visual-model-intro
https://www.w3.org/TR/CSS22/zindex.html
What You May Not Know About the Z-Index Property
關(guān)于z-index 那些你不知道的事
談?wù)勔恍┯腥さ腃SS題目（三）-- 層疊順序與堆棧上下文知多少
深入理解CSS中的層疊上下文和層疊順序
