【學習筆記】CSS深刻理解之z-index

張鑫旭的CSS深刻理解之z-index學習筆記

層疊上下文

什麼是層疊上下文？
在z軸上延伸出一個層級，離父級層疊上下文的頂部更近。

如何產生層疊上下文？

• 根元素具備根層疊上下文
• z-index不爲"auto"的定位元素
• 一個 z-index 值不爲 "auto"的 flex 項目 (flex item)，即：父元素 display: flex|inline-flex，
• opacity 屬性值小於 1 的元素，
• transform 屬性值不爲 "none"的元素，
• mix-blend-mode 屬性值不爲 "normal"的元素，
• filter值不爲「none」的元素，
• perspective值不爲「none」的元素，
• isolation 屬性被設置爲 "isolate"的元素，
• position: fixed（Chrome等webkit內核瀏覽器）
• 在 will-change 中指定了任意 CSS 屬性，即使你沒有直接指定這些屬性的值（參考 這篇文章）
• -webkit-overflow-scrolling 屬性被設置 "touch"的元素

什麼是層疊水平？
層疊上下文中的每一個元素都有一個層疊水平，決定同一個層疊上下文中的元素在z軸上的顯示順序。遵循「後來居上」和「誰大誰上」的層疊原則。

層疊順序

一個層疊上下文內，元素髮生層疊時候有着特定的垂直顯示順序，也就是下圖顯示的層疊規則

• 層疊上下文的background/border（裝飾層）
• 負z-index的依賴z-index層疊上下文元素
• 塊狀盒子（佈局）
• float浮動盒子（佈局）
• inline/inline-block水平盒子（內容）
• z-index爲auto/z-index爲0的依賴z-index層疊上下文元素或不依賴z-index的層疊上下文
• 正z-index的依賴z-index層疊上下文元素

關於「依賴z-index的層疊上下文」
建立層疊上下文的方式前文已列出，定位元素以及父元素爲flex定位的元素，必須依賴z-index值才能建立層疊上下位，因此統稱爲依賴z-index的層疊上下文元素。而其餘屬性即不依賴z-index的層疊上下文。

z-index和層疊上下文

• 默認z-index: auto至關因而z-index: 0但不會產生層疊上下文
• z-index只對依賴z-index的層疊上下文元素起做用
• z-index不爲auto的定位元素會建立層疊上下文
• z-index層疊順序的比較止步於父級層疊上下文

https://codepen.io/curlywater...
第一組，藍色盒子設置opacity:0.8;z-index:2，紅色盒子設置transform，證實z-index對不依賴z-index的層疊上下文元素無效
第二組，藍色盒子relative，紅色盒子flex的子元素，二者都未設置z-index，未產生層疊上下文，紅色盒子父級爲塊狀盒子，藍色盒子爲z-inedx爲auto的層疊上下文元素
第三組，藍色盒子relative，紅色盒子flex的子元素，二者都z-index: 0，產生層疊上下文，後來居上

z-index實踐經驗

• 非浮層元素避免設置z-index值（能夠經過更改DOM順序，建立層疊上下文來代替），z-index值不須要超過2
• 使用負z-index實現可訪問性隱藏