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的五种绑定