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

Steven 發布于2019-08-30 15:54 / 2449人閱讀

摘要：張鑫旭的深入理解之學習筆記層疊上下文什么是層疊上下文在軸上延伸出一個層級，離父級層疊上下文的頂部更近。遵循后來居上和誰大誰上的層疊原則。

張鑫旭的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實現可訪問性隱藏

GPU云服務器云服務器深入理解webrtc之aec 如何深入理解深度學習深入理解系列深入理解linux

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

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

【學習筆記】CSS深入理解之absolute

摘要：張鑫旭的深入理解之學習筆記絕對定位的特性絕對定位與浮動相似，都有破壞性和包裹性。利用絕對定位元素脫離文檔流的特性，使用動畫可以避免大范圍的回流和重繪。絕對定位元素拉伸實現寬高自適應，可應用于大范圍的布局。《張鑫旭的CSS深入理解之absolute》學習筆記絕對定位的特性絕對定位與浮動相似，都有破壞性和包裹性。浮動的一些應用場景中也可用絕對定位替代絕對定位的行為表現無依賴絕對...

Anleb 2019-08-30 15:54 評論0 收藏0
【學習筆記】CSS深入理解之relative

摘要：張鑫旭的深入理解之對絕對定位元素的限制限制定位限制層次限制，原本對絕對定位元素無效，容器設置的情況下生效的定位特性相對于自身無侵入，不會對其他元素的布局產生影響與與同時存在時，忽視的層疊特性可以提高層疊上下文為具體數值時，限制內部絕對定位張鑫旭的CSS深入理解之relative relative對絕對定位元素的限制限制定位限制層次限制overflow，overflow原本對絕...

nanfeiyan 2019-08-30 15:54 評論0 收藏0
前端筆記之CSS（下）浮動&BFC&定位&Hack

摘要：并最終窗體自上而下分成一行行，并在每行中從左至右的順序排放元素。宋體清除浮動這是專業術語，其實就是需要我們解決浮動帶來的影響宋體父元素的高度塌陷宋體。相對定位的參考點是自身。一、浮動 1.1 各個語言的主要知識點 HTML：標簽語義化(那么怎么樣布局才是合理的?沒有絕對的對和錯) CSS：　　樣式：　　布局：　　　　標準流(標準文檔流、普通文檔流)：盒子模型(width/height...

番茄西紅柿 2019-04-23 11:44 評論0 收藏0
深入學習CSS布局系列（一）布局常用屬性

摘要：布局涉及到的屬性常用屬性值此元素不會被顯示它和屬性不一樣。當所有父元素中的所有元素脫離文檔流之后，父元素將失去原有默認的內容高度浮動塌陷配合使用屬性規定元素的哪一側不允許其他浮動元素。 @(CSS技巧)[CSS, 布局] 深入學習CSS布局系列（一）布局常用屬性一直感覺自己對CSS的各個屬性很了解，可是在前幾天一次面試后發現自己真的很多地方感覺自己知道，可是實際上自己并不是真的理解了...

Noodles 2019-08-30 12:53 評論0 收藏0
css揭秘筆記——形狀

摘要：把改成，就變成了這樣實現邊框內圓角多重邊框還有下實現多重背景為某一層背景單獨設置類似這樣的屬性等等。裁切路徑方案這種方案，當內邊距不夠寬時，會裁切掉文本。自適應的橢圓（border-radius的用法）單獨指定水平和垂直半徑長寬固定的元素，可以通過指定寬高的一半，變為橢圓形，格式為兩個值用/分開。 width: 100px; height: 80px; border-radi...

dantezhao 2019-08-29 13:47 評論0 收藏0