[CSS LEARN]層疊上下文、層疊等級、層疊順序

蘇水軒發表於2019-02-20
CSS

層疊上下文

層疊上下文(stacking context)，是HTML中一個三維的概念，如果一個元素含有層疊上下文，(也就是說它是層疊上下文元素)，我們可以理解為這個元素在Z軸上就“高人一等”，最終表現就是它離螢幕觀察者更近。

層疊上下文高於普通元素，在z軸上。

根節點元素為預設處於層疊上下文中。

觸發條件

  1. HTML中的根元素<html></html>本身j就具有層疊上下文，稱為“根層疊上下文”。
  2. 普通元素設定position屬性為非static值並設定z-index屬性為具體數值，產生層疊上下文。（郭東東的觸發中沒有設定z-index）
  3. CSS3中的新屬性也可以產生層疊上下文。

  • 父元素的display屬性值為flex|inline-flex，子元素z-index屬性值不為auto的時候，子元素為層疊上下文元素；
元素的opacity屬性值不是1；
元素的transform屬性值不是none；
元素mix-blend-mode屬性值不是normal`；
元素的filter屬性值不是none；
元素的isolation屬性值是isolate；

will-change指定的屬性值為上面任意一個；
元素的-webkit-overflow-scrolling屬性值設定為touch。                                                   複製程式碼

層疊等級

  1. 普通元素的層疊等級優先由其所在的層疊上下文決定。
  2. 層疊等級的比較只有在當前層疊上下文元素中才有意義。不同層疊上下文中比較層疊等級是沒有意義的。（比較不同層疊上下文在z軸上的前後順序， ?z-index）

下圖為同一層疊上下文中元素在z軸上的前後順序。(層疊順序圖)

[CSS LEARN]層疊上下文、層疊等級、層疊順序

                                                      圖片拷貝自掘金使用者郭東東

層疊順序

“層疊順序”(stacking order)表示元素髮生層疊時按照特定的順序規則在Z軸上垂直顯示

元素層疊場景的顯示判斷

  1. 首先先看要比較的兩個元素是否處於同一個層疊上下文中：
    1. 如果是，誰的層疊等級大，誰在上面（怎麼判斷層疊等級大小呢？——看“層疊順序”圖）。
    2. 如果兩個元素不在同一層疊上下文中，請先比較他們所處的層疊上下文的層疊等級。
  2. 當兩個元素層疊等級相同、層疊順序相同時，在DOM結構中後面的元素層疊等級在前面元素之上。


Q: 一個z-index： 99999的元素為什麼被普通元素蓋住了？
A: 因為其所在的層疊上下文的層疊等級低於該普通元素所在層疊上下文層疊等級。



參考文章

以上的內容有部分內容參考了簡書作者長安曹公子的文章-《徹底搞懂CSS層疊上下文、層疊等級、層疊順序、z-index》


相關文章