CSS层叠上下文、层叠顺序和层叠等级
0 前言
在討論層疊上下文和層疊順序之前先舉個例子，創建兩個box，其中紅色box長200px寬400px，藍色box長400px寬200px：
<div class="box"><div class="blue-box"></div></div><div class="box"><div class="red-box"></div></div> .box {position: relative;z-index: auto; /* 默認值 */ }.blue-box {width: 400px;height: 200px;background: blue;position: absolute; }.red-box {width: 200px;height: 400px;background: red;position: absolute; }效果如下：
在此引出兩個問題：
1 層疊上下文
1.1 層疊上下文的概念
之所以元素在瀏覽器中有顯示上下之分，是因為瀏覽器將頁面構想成一個3D的坐標軸，而屏幕的正面即為坐標軸的z軸，如圖所示：
每個頁面都有一個默認的層疊上下文，根元素html就是一個層疊上下文，而且其中還可能含有其他的層疊上下文，在同一個層疊上下文中，元素出現的上下順序叫做層疊等級，決定層疊等級的規則叫做層疊順序。
前面提到根元素html就是一個層疊上下文，并且還可以在其中創建其他層疊上下文，在CSS中每個層疊上下文的層疊層都是獨立的，不受其他層疊上下文的影響，如下圖所示，跟元素html之中又有三個獨立的層疊上下文，三個獨立的層疊上下文中各自有自己的層疊層：
1.2 創建層疊上下文的方法
滿足以下任意一種情況即可創建一個層疊上下文：
- 根元素html（屬于被動創建層疊上下文）
- position值為非static且z-index值不為auto。
- 彈性盒模型flex中的元素，且z-index值不為auto。
- opacity屬性值小于1的元素。
- …
以上列舉的是常見的方法，更多方法可查閱文檔MDN-層疊上下文。
2 層疊等級
層疊等級決定了同一個層疊上下文中的層疊順序，并且元素的層疊等級只有在同一個層疊上下文中比較才有意義，如1.1節中三個獨立層疊上下文內的A、B、C三個元素，因為這三個元素屬于不同的層疊上下文，所以各自擁有獨立的層疊順序，所以將其比較是沒有意義的。
在1.1節中的例子里，A、B、C三個元素是沒有發生位置重疊的，若此時三個元素發生了位置重疊，如下圖所示：
在進行比較時，由于三個元素屬于不同的層疊上下文，所以就要找對應父級元素所在的上下文，即要確定red、green、blue三個層疊上下文的層疊等級，因為這red、green、blue都屬于根元素html的層疊上下文中，所以能夠進行比較，最終根據父級元素的層疊等級來確定三個子元素A、B、C的顯示順序。
3 被誤解的z-index
舉個例子如下圖所示，red在green和blue之下，所以元素A也在B和C之下，那么怎么讓A顯示在最上面呢？
相信有人給定會給出答案：給元素A設置CSS樣式：z-index: 9999;這樣元素A就顯示在所有元素之上了。其實這種說法是錯誤的，這也是很多人對于z-index的誤解。
確實，當需要指定不同的排列順序時，只要給元素指定一個z-index數值，該數值必須是一個整數（正整數和負整數），這個數值表示了元素在z軸的位置，數值越大，元素越在z軸的最上方。但是，z-index的使用是有先決條件的：
根據第兩個先決條件可知，由于元素A、B、C不屬于同一個層疊上下文，所以即使給元素A設置CSS樣式：z-index: 9999;也無法將A元素置于所有元素之上。
4 層疊順序
當元素發生重疊時，下圖描述了7種元素類型對應的層疊順序：
圖中的順序很好理解，但是有幾點值得注意：
另外可以通過下面的圖片對層疊順序進行記憶：
除去z-index相關的層疊順序，由表示內容的內聯元素層疊順序最高，其次是表示內容布局的浮動元素和塊級元素，最后是用于裝飾內容的層疊上下文的背景和邊框。
5 判斷層疊順序的方法
6 前言中的問題
前言中留下了兩個問題：
a. 首先判斷兩個兩個box是否在同一個層疊上下文中，由于red-box和blue-box都擁有一個父元素box，父元素box中含有非static定位屬性，但是z-index為auto，所以父元素box并沒有形成單獨的層疊上下文，所以這兩個box同屬于根元素html的層疊上下文中，因此red-box和blue-box也屬于同一個層疊上下文。
b. 此時再判斷red-box和blue-box的層疊順序，由于red-box和blue-box屬于同種類型的元素，兩者擁有相同的層疊順序，所以后出現的red-box會位于blue-box之上。
（1）方案一：根據對于問題1的分析，可以將red-box和blue-box互換位置，如下代碼，這樣blue-box就成為了后出現的元素：
（2）方案二：由于red-box和blue-box屬于同一個層疊上下文，所以可以通過z-index屬性將blue-box置于red-box之上，如下代碼，給blue-box添加z-index: 2，給red-box添加z-index: 1：
.blue-box {width: 400px;height: 200px;background: blue;position: absolute;z-index: 2; /* 添加z-index */ }.red-box {width: 200px;height: 400px;background: red;position: absolute;z-index: 1; /* 添加z-index */ }（3）方案三：方案一和方案二都是在同一個層疊上下文的條件下，方案三將red-box和blue-box置于兩個不同的層疊上下文，修改代碼如下：
<div class="box1"><div class="blue-box"></div> </div> <div class="box2"><div class="red-box"></div> </div>通過將父級box1和box2的z-index修改為0而創建了兩個單獨的層疊上下文。
.box1, .box2 {position: relative;z-index: 0; /* 創建層疊上下文 */ }.blue-box {width: 400px;height: 200px;background: blue;position: absolute;z-index: 2; }.red-box {width: 200px;height: 400px;background: red;position: absolute;z-index: 1; }注意：此時red-box和blue-box的z-index還保留了，效果如圖：
可以發現red-box和blue-box的z-index失效了，即使blue-box的z-index比red-box大也無濟于事，這也正好驗證了關鍵結論“元素的z-index值只有在同一個層疊上下文中才有意義”。這里之所以red-box還在blue-box之上是因為其父級box在根元素html層疊上下文中的層疊順序。
所以在這個例子中，想要實現blue-box在red-box之上，需要通過z-index修改box1和box2的層疊順序：
.box1 {position: relative;z-index: 1;}.box2 {position: relative;z-index: 0;}效果如下：
7 總結
在實際開發中，需要牢記的內容有：
a. 正z-index
b. 默認值z-index:auto、z-index:0（注意兩者區別，參閱第4章內容）
c. 表示內容的inline/inline-block
d. 表示布局的float浮動元素和block塊級元素
e. 負z-index
f. 表示裝飾的層疊上下文的背景和邊框
總結
以上是生活随笔為你收集整理的CSS层叠上下文、层叠顺序和层叠等级的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS中的BFC机制
- 下一篇： JavaScript中this的五种绑定