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; }

效果如下：

在此引出兩個問題：

為什么red-box在blue-box之上？

怎么讓blue-box在red-box之上？

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的使用是有先決條件的：

z-index只適用于定位的元素，對非定位元素無效，如果一個元素沒有指定z-index，那么其默認值是auto（z-index的0層）。

元素的z-index值只有在同一個層疊上下文中才有意義。

根據第兩個先決條件可知，由于元素A、B、C不屬于同一個層疊上下文，所以即使給元素A設置CSS樣式：z-index: 9999;也無法將A元素置于所有元素之上。

4 層疊順序

當元素發生重疊時，下圖描述了7種元素類型對應的層疊順序：


圖中的順序很好理解，但是有幾點值得注意：

內聯元素（inline/inline-block）的層疊順序高于浮動float元素和塊級block元素：這個容易理解，網頁的重點是顯示內容，如內聯元素span用于定義文本塊，內聯元素img用于顯示圖片，所以理所當然的使這類表示內容的內聯元素擁有更高的層疊順序。

浮動float元素的層疊順序高于塊級block元素。

雖說z-index:auto和z-index:0在同一層疊順序，但是兩者有著重要的區別：參照1.2節中創建層疊上下文的方法，z-index:auto是不會創建一個新的層疊上下文的，而z-index:0能夠創建一個新的層疊上下文。

另外可以通過下面的圖片對層疊順序進行記憶：

除去z-index相關的層疊順序，由表示內容的內聯元素層疊順序最高，其次是表示內容布局的浮動元素和塊級元素，最后是用于裝飾內容的層疊上下文的背景和邊框。

5 判斷層疊順序的方法

在同一個層疊上下文中，其內部元素的層疊順序按照第4章中的層疊順序圖來排列。

在同一個層疊上下文中，若兩個元素的層疊順序相同，則后面的元素會在前面的元素之上。

在不同層疊上下文的情況下比較兩個元素的層疊順序，需要向上查詢其父元素所在的層疊上下文，直到兩者的某一級父元素在同一層，再比較這兩個父級元素的層疊順序。

6 前言中的問題

前言中留下了兩個問題：

為什么red-box在blue-box之上？
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之上。

怎么讓blue-box在red-box之上？
（1）方案一：根據對于問題1的分析，可以將red-box和blue-box互換位置，如下代碼，這樣blue-box就成為了后出現的元素：

<div class="box"><div class="red-box"></div> </div> <div class="box"><div class="blue-box"></div> </div>

（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 總結

在實際開發中，需要牢記的內容有：

創建層疊上下文的方法：MDN-層疊上下文

z-index的使用條件：必須是定位元素且比較z-index的元素在同一個層疊上下文，參閱第3章內容。

層疊順序：可以按照如下方法記憶（由高到低）：
a. 正z-index
b. 默認值z-index:auto、z-index:0（注意兩者區別，參閱第4章內容）
c. 表示內容的inline/inline-block
d. 表示布局的float浮動元素和block塊級元素
e. 負z-index
f. 表示裝飾的層疊上下文的背景和邊框

判斷層疊順序的方法，參閱第5章內容。

總結

以上是生活随笔為你收集整理的CSS层叠上下文、层叠顺序和层叠等级的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。