【學(xué)習(xí)筆記】CSS深入理解之z-index

Steven 發(fā)布于2019-08-30 15:54 / 2438人閱讀

摘要：張?chǎng)涡竦纳钊肜斫庵畬W(xué)習(xí)筆記層疊上下文什么是層疊上下文在軸上延伸出一個(gè)層級(jí)，離父級(jí)層疊上下文的頂部更近。遵循后來居上和誰(shuí)大誰(shuí)上的層疊原則。

張?chǎng)涡竦腃SS深入理解之z-index學(xué)習(xí)筆記

層疊上下文

什么是層疊上下文？
在z軸上延伸出一個(gè)層級(jí)，離父級(jí)層疊上下文的頂部更近。

如何產(chǎn)生層疊上下文？

根元素具有根層疊上下文

z-index不為"auto"的定位元素

一個(gè) z-index 值不為 "auto"的 flex 項(xiàng)目 (flex item)，即：父元素 display: flex|inline-flex，

opacity 屬性值小于 1 的元素，

transform 屬性值不為 "none"的元素，

mix-blend-mode 屬性值不為 "normal"的元素，

filter值不為“none”的元素，

perspective值不為“none”的元素，

isolation 屬性被設(shè)置為 "isolate"的元素，

position: fixed（Chrome等webkit內(nèi)核瀏覽器）

在 will-change 中指定了任意 CSS 屬性，即便你沒有直接指定這些屬性的值（參考這篇文章）

-webkit-overflow-scrolling 屬性被設(shè)置 "touch"的元素

什么是層疊水平？
層疊上下文中的每個(gè)元素都有一個(gè)層疊水平，決定同一個(gè)層疊上下文中的元素在z軸上的顯示順序。遵循“后來居上”和“誰(shuí)大誰(shuí)上”的層疊原則。

層疊順序

一個(gè)層疊上下文內(nèi)，元素發(fā)生層疊時(shí)候有著特定的垂直顯示順序，也就是下圖顯示的層疊規(guī)則

層疊上下文的background/border（裝飾層）

負(fù)z-index的依賴z-index層疊上下文元素

塊狀盒子（布局）

float浮動(dòng)盒子（布局）

inline/inline-block水平盒子（內(nèi)容）

z-index為auto/z-index為0的依賴z-index層疊上下文元素或不依賴z-index的層疊上下文

正z-index的依賴z-index層疊上下文元素

關(guān)于“依賴z-index的層疊上下文”
創(chuàng)建層疊上下文的方式前文已列出，定位元素以及父元素為flex定位的元素，必須依賴z-index值才能創(chuàng)建層疊上下位，所以統(tǒng)稱為依賴z-index的層疊上下文元素。而其他屬性即不依賴z-index的層疊上下文。

z-index和層疊上下文

默認(rèn)z-index: auto相當(dāng)于是z-index: 0但不會(huì)產(chǎn)生層疊上下文

z-index只對(duì)依賴z-index的層疊上下文元素起作用

z-index不為auto的定位元素會(huì)創(chuàng)建層疊上下文

z-index層疊順序的比較止步于父級(jí)層疊上下文

https://codepen.io/curlywater...
第一組，藍(lán)色盒子設(shè)置opacity:0.8;z-index:2，紅色盒子設(shè)置transform，證明z-index對(duì)不依賴z-index的層疊上下文元素?zé)o效
第二組，藍(lán)色盒子relative，紅色盒子flex的子元素，兩者都未設(shè)置z-index，未產(chǎn)生層疊上下文，紅色盒子父級(jí)為塊狀盒子，藍(lán)色盒子為z-inedx為auto的層疊上下文元素
第三組，藍(lán)色盒子relative，紅色盒子flex的子元素，兩者都z-index: 0，產(chǎn)生層疊上下文，后來居上

z-index實(shí)踐經(jīng)驗(yàn)

非浮層元素避免設(shè)置z-index值（可以通過更改DOM順序，創(chuàng)建層疊上下文來代替），z-index值不需要超過2

使用負(fù)z-index實(shí)現(xiàn)可訪問性隱藏