理解CSS中的層疊上下文和層疊順序

什麼是層疊上下文（stacking context）

• 能夠理解爲一個dom節點在Z軸高人一等，特性相似於BFC，即層疊上下文的內部子元素再怎麼翻江倒海，翻雲覆雨都不會影響外部的元素。

CSS2建立層疊上下文的兩種方法（參考MDN）

• 根元素 (HTML)
• 絕對（absolute）定位或相對（relative）定位且 z-index 值不爲」auto」

CSS3新增的8種方法（參考MDN）

• 一個 flex 元素(flex item)，且 z-index 值不爲 「auto」，也就是父元素 display: flex|inline-flex
• 元素的 opacity 屬性值小於 1（參考：the specification for opacity）
• 元素的 transform 屬性值不爲 「none」
• 元素的 mix-blend-mode 屬性值不爲 「normal」
• 元素的 isolation 屬性被設置爲 「isolate」
• 在 mobile WebKit 和 Chrome 22+ 內核的瀏覽器中，position: fixed 老是建立一個新的層疊上下文, 即便 z-index 的值是 「auto」
• 在 will-change 中指定了任意 CSS 屬性，即使你沒有定義該元素的這些屬性（參考：Everything You Need to Know About the CSS will-change Property）
• 元素的 -webkit-overflow-scrolling 屬性被設置 「touch」

什麼是層疊水平（stacking level）

• 層疊水平決定了同一個層疊上下文中元素在z軸上的顯示順序（層疊順序），也就是說普通元素的層疊水平優先由層疊上下文決定。

層疊順序（不包含CSS3屬性）

注意：以上只適用於同一個層級上下文

層疊順序的例子

CSS2層疊上下文的層疊順序demo

建立層疊上下文的opacity影響層疊順序的例子

驗證css中opacity建立層疊上下文影響的層疊順序demo

層疊準則

• 誰大誰上：當具備明顯的層疊水平標識（即上面那幅層疊順序圖）的時候，在同一個層疊上下文內，層疊水平值大的那一個覆蓋小的那一個。
• 後來居上：當元素的層疊水平一致、層疊順序相同的時候，在DOM流中處於後面的元素會覆蓋前面的元素。

結論

• 屬於同一層疊上下文的元素（不管它們在結構上是兄弟或父子，甚至是祖孫），都遵循上文所述的層疊順序；
• 不一樣的層疊上下文之間，層級較大的層疊上下文元素及其內部元素位於層級小的層疊上下文元素及其內部元素之上；
• 不一樣的層疊上下文之間互相獨立；
• 層疊上下文可嵌套，內部規則不影響外部。

相關鏈接

MDN：The stacking context
深刻理解CSS中的層疊上下文和層疊順序
css層疊順序探究
分層的顯示