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

Bryan 發布于2019-08-30 14:14 / 3223人閱讀

摘要：后來居上當元素的層疊水平一致層疊順序相同的時候，在流中處于后面的元素會覆蓋前面的元素。相關連接深入理解中的層疊上下文和層疊順序層疊順序探究分層的顯示

什么是層疊上下文（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層疊順序探究
分層的顯示

云服務器 GPU云服務器 html層疊順序 html按鈕層疊 html 層疊懸浮 html外部層疊樣式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115876.html

徹底搞懂CSS層疊上下文、層疊等級、層疊順序、z-index

摘要：栗子有兩個，被包裹在一個里，被包裹在另一個盒子里，同時為兩個和設置和屬性效果我們發下，雖然元素的值為，遠大于和的值，但是由于的父元素產生的層疊上下文的的值為，的父元素所產生的層疊上下文的值為，所以永遠在和下面。前言最近，在項目中遇到一個關于CSS中元素z-index屬性的問題，具體問題不太好描述，總結起來就是當給元素和父元素色設置position屬性和z-index相關屬性后，頁面...

Steve_Wang_ 2019-08-29 16:35 評論0 收藏0
徹底搞懂CSS層疊上下文、層疊等級、層疊順序、z-index

摘要：栗子有兩個，被包裹在一個里，被包裹在另一個盒子里，同時為兩個和設置和屬性效果我們發下，雖然元素的值為，遠大于和的值，但是由于的父元素產生的層疊上下文的的值為，的父元素所產生的層疊上下文的值為，所以永遠在和下面。前言最近，在項目中遇到一個關于CSS中元素z-index屬性的問題，具體問題不太好描述，總結起來就是當給元素和父元素色設置position屬性和z-index相關屬性后，頁面...

Donne 2019-08-23 11:36 評論0 收藏0
CSS 層疊上下文（Stacking Context）

摘要：當第二層的容器盒子升級為層疊上下文時，紅色盒子及灰色盒子的軸層級受制于第二層的容器盒子。當元素處于同一層疊上下文內時可按照如下規則進行層疊判斷。本文首發于政采云前端團隊博客：CSS 層疊上下文（Stacking Context）在網頁制作的過程中，元素與元素之間的位置關系，在坐標軸上一般可體現為 X 軸、Y 軸和 Z 軸。對于 X 軸和 Y 軸的定位大多數開發都能比較直觀的搞清楚...

marek 2019-08-30 15:44 評論0 收藏0
【學習筆記】CSS深入理解之z-index

摘要：張鑫旭的深入理解之學習筆記層疊上下文什么是層疊上下文在軸上延伸出一個層級，離父級層疊上下文的頂部更近。遵循后來居上和誰大誰上的層疊原則。張鑫旭的CSS深入理解之z-index學習筆記層疊上下文什么是層疊上下文？在z軸上延伸出一個層級，離父級層疊上下文的頂部更近。如何產生層疊上下文？根元素具有根層疊上下文 z-index不為auto的定位元素一個 z-index 值不為 ...

Steven 2019-08-30 15:54 評論0 收藏0