資訊專欄INFORMATION COLUMN
摘要：張鑫旭的深入理解之學習筆記層疊上下文什么是層疊上下文在軸上延伸出一個層級，離父級層疊上下文的頂部更近。遵循后來居上和誰大誰上的層疊原則。
張鑫旭的CSS深入理解之z-index學習筆記層疊上下文
什么是層疊上下文？
在z軸上延伸出一個層級，離父級層疊上下文的頂部更近。
如何產(chǎn)生層疊上下文？
根元素具有根層疊上下文
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 屬性被設(shè)置為 "isolate"的元素，
position: fixed（Chrome等webkit內(nèi)核瀏覽器）
在 will-change 中指定了任意 CSS 屬性，即便你沒有直接指定這些屬性的值（參考 這篇文章）
-webkit-overflow-scrolling 屬性被設(shè)置 "touch"的元素
什么是層疊水平？
層疊上下文中的每個元素都有一個層疊水平，決定同一個層疊上下文中的元素在z軸上的顯示順序。遵循“后來居上”和“誰大誰上”的層疊原則。
一個層疊上下文內(nèi)，元素發(fā)生層疊時候有著特定的垂直顯示順序，也就是下圖顯示的層疊規(guī)則
層疊上下文的background/border（裝飾層）
負z-index的依賴z-index層疊上下文元素
塊狀盒子（布局）
float浮動盒子（布局）
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: auto相當于是z-index: 0但不會產(chǎn)生層疊上下文
z-index只對依賴z-index的層疊上下文元素起作用
z-index不為auto的定位元素會創(chuàng)建層疊上下文
z-index層疊順序的比較止步于父級層疊上下文
https://codepen.io/curlywater...
第一組，藍色盒子設(shè)置opacity:0.8;z-index:2，紅色盒子設(shè)置transform，證明z-index對不依賴z-index的層疊上下文元素無效
第二組，藍色盒子relative，紅色盒子flex的子元素，兩者都未設(shè)置z-index，未產(chǎn)生層疊上下文，紅色盒子父級為塊狀盒子，藍色盒子為z-inedx為auto的層疊上下文元素
第三組，藍色盒子relative，紅色盒子flex的子元素，兩者都z-index: 0，產(chǎn)生層疊上下文，后來居上
非浮層元素避免設(shè)置z-index值（可以通過更改DOM順序，創(chuàng)建層疊上下文來代替），z-index值不需要超過2
使用負z-index實現(xiàn)可訪問性隱藏
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117041.html
摘要：張鑫旭的深入理解之學習筆記絕對定位的特性絕對定位與浮動相似，都有破壞性和包裹性。利用絕對定位元素脫離文檔流的特性，使用動畫可以避免大范圍的回流和重繪。絕對定位元素拉伸實現(xiàn)寬高自適應，可應用于大范圍的布局。 《張鑫旭的CSS深入理解之a(chǎn)bsolute》學習筆記 絕對定位的特性 絕對定位與浮動相似，都有破壞性和包裹性。浮動的一些應用場景中也可用絕對定位替代 絕對定位的行為表現(xiàn) 無依賴絕對...
摘要：張鑫旭的深入理解之對絕對定位元素的限制限制定位限制層次限制，原本對絕對定位元素無效，容器設(shè)置的情況下生效的定位特性相對于自身無侵入，不會對其他元素的布局產(chǎn)生影響與與同時存在時，忽視的層疊特性可以提高層疊上下文為具體數(shù)值時，限制內(nèi)部絕對定位 張鑫旭的CSS深入理解之relative relative對絕對定位元素的限制 限制定位 限制層次 限制overflow，overflow原本對絕...
摘要：并最終窗體自上而下分成一行行，并在每行中從左至右的順序排放元素。宋體清除浮動這是專業(yè)術(shù)語，其實就是需要我們解決浮動帶來的影響宋體父元素的高度塌陷宋體。相對定位的參考點是自身。 一、浮動 1.1 各個語言的主要知識點 HTML：標簽語義化(那么怎么樣布局才是合理的?沒有絕對的對和錯) CSS： 樣式： 布局： 標準流(標準文檔流、普通文檔流)：盒子模型(width/height...
摘要：布局涉及到的屬性常用屬性值此元素不會被顯示它和屬性不一樣。當所有父元素中的所有元素脫離文檔流之后，父元素將失去原有默認的內(nèi)容高度浮動塌陷配合使用屬性規(guī)定元素的哪一側(cè)不允許其他浮動元素。 @(CSS技巧)[CSS, 布局] 深入學習CSS布局系列（一）布局常用屬性 一直感覺自己對CSS的各個屬性很了解，可是在前幾天一次面試后發(fā)現(xiàn)自己真的很多地方感覺自己知道，可是實際上自己并不是真的理解了...
摘要：把改成，就變成了這樣實現(xiàn)邊框內(nèi)圓角多重邊框還有下實現(xiàn)多重背景為某一層背景單獨設(shè)置類似這樣的屬性等等。裁切路徑方案這種方案，當內(nèi)邊距不夠?qū)挄r，會裁切掉文本。 自適應的橢圓（border-radius的用法） 單獨指定水平和垂直半徑 長寬固定的元素，可以通過指定寬高的一半，變?yōu)闄E圓形，格式為兩個值用/分開。 width: 100px; height: 80px; border-radi...
閱讀 3049·2021-10-13 09:39
閱讀 1891·2021-09-02 15:15
閱讀 2455·2019-08-30 15:54
閱讀 1814·2019-08-30 14:01
閱讀 2614·2019-08-29 14:13
閱讀 1428·2019-08-29 13:10
閱讀 2741·2019-08-28 18:15
閱讀 3904·2019-08-26 10:20
