資訊專欄INFORMATION COLUMN
摘要：聲明，部分瀏覽器需要數(shù)字配合指定的屬性值為上面任意一個的作用增強(qiáng)頁面渲染性能，即準(zhǔn)備圖形處理器讓瀏覽器加速渲染的什么是圖形處理器是與處理和繪制圖形相關(guān)的硬件。而則是真正的行為觸發(fā)之前告訴瀏覽器，提前預(yù)約從容不迫突然造訪手忙腳亂。
一、z-index七階層疊順序表
1.層疊順序的大小比較：
background/border < 負(fù)z-index < block塊狀水平盒子 < float浮動盒子 < inline/inline-block水平盒子 < z-index:auto或者看成z-index:0 /不依賴z-index的層疊上下文< 正z-index。
2.層疊順序級別高的元素覆蓋級別低的元素。
二、z-index與創(chuàng)建層疊上下文
1.首先要注意，z-index:auto 雖然可以看作z-index:0 ，但是這僅僅是在層疊順序的比較上；從層疊上下文上講，二者有本質(zhì)差別：auto 不會創(chuàng)建層疊上下文，z-index:0 會創(chuàng)建層疊上下文。
注意有一種特殊情況，那就是IE7下，auto也會創(chuàng)建層疊上下文，不符合標(biāo)準(zhǔn)。
2.z-index層疊順序的比較止步于父級層疊上下文
控制視圖時，如果父級元素沒有層疊上下文，則會一直找到根元素作為層疊上下文
3.z-index:數(shù)字 + 元素屬性 配合得到層疊上下文
①position:absolute/relative以及FireFox/IE下的position:fixed;
當(dāng)z-index的值為auto時，元素還是普通元素，當(dāng)z-index的值為具體數(shù)字時，就會創(chuàng)建層疊上下文
②z-index值不為auto的flex項（display:flex/inline-flex;）
層疊上下文元素是flex子元素，而不是flex容器元素
4.不需要與z-index:數(shù)字? 配合就可以創(chuàng)建層疊上下文的屬性
①元素的opacity值不為1；
②元素的transform值不為none；
③元素mix-blend-mode（混合模式）值不為normal；
④元素的filter（css3里的濾鏡，不是指IE6/7/8/9里私有的那個濾鏡）值不為none；
⑤元素的isolation（隔離）值是isolate（元素是孤立的）
isolation:isolate這個聲明是mix-blend-mode應(yīng)運(yùn)而生的。 默認(rèn)情況下，mix-blend-mode會混合z軸所有層疊在下面的元素，如果我們不希望某個層疊的元素參與混合就可以使用isolation:isolate。
⑥position：fixed聲明，部分瀏覽器（FireFox/IE）需要z-index:數(shù)字 配合 ⑦will-change指定的屬性值為上面任意一個
will-change的作用：增強(qiáng)頁面渲染性能，即準(zhǔn)備GPU（圖形處理器）讓瀏覽器加速渲染的
什么是GPU（圖形處理器）？GPU是與處理和繪制圖形相關(guān)的硬件。 GPU是專為執(zhí)行復(fù)雜的數(shù)學(xué)和幾何計算而設(shè)計的，可以讓CPU從圖形處理的任務(wù)中解放出來，從而執(zhí)行其他更多的系統(tǒng)任務(wù)，例如，頁面的計算與重繪。
當(dāng)我們通過某些行為（點(diǎn)擊、移動或滾動）觸發(fā)頁面進(jìn)行大面積繪制的時候，瀏覽器往往是沒有準(zhǔn)備的，只能被動使用CPU去計算與重繪，由于沒有事先準(zhǔn)備，應(yīng)付渲染夠嗆，于是掉幀，于是卡頓。而will-change則是真正的行為觸發(fā)之前告訴瀏覽器，提前預(yù)約從容不迫；突然造訪手忙腳亂。
⑧元素的-webkit-overflow-scrolling設(shè)為touch（移動端特有的原生的滾動）
5.不支持z-index層疊上下文元素的層疊順序均是z-index:auto;
6.為何定位元素會覆蓋普通元素？
例如當(dāng)圖片使用了position：relative；此時圖片z-index：auto；這時圖片的的層疊順序 > 內(nèi)聯(lián)元素（普通的圖片文字是內(nèi)聯(lián)元素，層疊順序是inline/inline-block），所以會覆蓋。
三、z-index相關(guān)實(shí)踐時注意的一些原則
1.最小化影響原則
目的：避免z-index嵌套層疊關(guān)系混亂
原因：①元素的層疊水平主要由所在的層疊上下文決定
②IE7 z-index:auto;也會新建層疊上下文
做法：①避免使用定位屬性
②定位屬性從大容器平級分離為私有小容器（relative課程）
2.不犯二準(zhǔn)則
目的：避免z-index混亂，出現(xiàn)一山比一山高的樣式問題
原因：多人協(xié)作以及后期維護(hù)
做法：對于非浮層元素，避免設(shè)置z-index值，z-index沒有任何道理需要超過2
（浮層元素：比如彈框，在頁面里拖來拖去）
3.組件層級計數(shù)器
目的：避免浮層組件因z-index背覆蓋的問題
原因：①總會遇到意想不到的高層級元素（比如其他團(tuán)隊介入，或者使用網(wǎng)上的其他組件）
②組件的覆蓋規(guī)則具有動態(tài)性（比如一個頁面有好多個彈框）
做法：組件層級計數(shù)器方法：通過js獲得body下子元素的最大z-index值，
例如組件默認(rèn)是m，而body最大是n（n>m），那么就把組件設(shè)置為n+1
4.可訪問性隱藏?? 人肉眼看不見，但是輔助設(shè)備可以識別的隱藏
z-index負(fù)值元素在層疊上下文的背景之上，其他元素之下
做法：z-index:-1;
eg：html代碼：
css代碼：
XML/HTML Code復(fù)制內(nèi)容到剪貼板原文鏈接：https://www.cnblogs.com/lucktian/p/5523165.html
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1132.html
摘要：檢查當(dāng)前上下文中的參數(shù)，建立該對象下的屬性與屬性值。檢查當(dāng)前上下文的函數(shù)聲明，也就是使用關(guān)鍵字聲明的函數(shù)。數(shù)據(jù)類型跟布爾值比較回顧下前面說的要點(diǎn)然后有幾個應(yīng)該要知道的隱形轉(zhuǎn)換和不能轉(zhuǎn)換成其他任何值。 前言 2018/04/27 新增六，講解淺拷貝和深拷貝的區(qū)別并簡單實(shí)現(xiàn), 七，原生JS操作DOM？2018/04/30 新增八，解決計算精度問題,例如0.1+0.2？2018/05/0...
摘要：張鑫旭的深入理解之學(xué)習(xí)筆記層疊上下文什么是層疊上下文在軸上延伸出一個層級，離父級層疊上下文的頂部更近。遵循后來居上和誰大誰上的層疊原則。 張鑫旭的CSS深入理解之z-index學(xué)習(xí)筆記 層疊上下文 什么是層疊上下文？在z軸上延伸出一個層級，離父級層疊上下文的頂部更近。 如何產(chǎn)生層疊上下文？ 根元素具有根層疊上下文 z-index不為auto的定位元素 一個 z-index 值不為 ...
摘要：先上效果圖正如標(biāo)題所說，本文是教你如何巧用偽類制作下拉菜單，原生，無。實(shí)際例子其實(shí)就是主題的右上角那個按鈕，你點(diǎn)一下就會有一個下拉菜單出現(xiàn)，在其他區(qū)域點(diǎn)擊返回原狀。為了讓下拉菜單更顯下拉的情況，采用的定位下轉(zhuǎn)換原點(diǎn)。 原文鏈接：http://devework.com/css3-target-dropdown.html showImg(https://segmentfault.com/...
摘要：概述在世界這本書中有一些黑魔法給列舉出來，在結(jié)合自己的理解。篇幅有點(diǎn)長，希望大家能夠堅持看完，一定會有收獲以下是摘自每章內(nèi)一些重要的概念與技巧。 概述 在《css世界》這本書中有一些黑魔法給列舉出來，在結(jié)合自己的理解。篇幅有點(diǎn)長，希望大家能夠堅持看完，一定會有收獲?。?！以下是摘自每章內(nèi)一些重要的概念與技巧。其中有解決圖片間隙的問題、小圖標(biāo)與文字居中問題等; ps: 特別是 line-h...
閱讀 2379·2021-11-11 16:54
閱讀 2631·2021-09-26 09:47
閱讀 3992·2021-09-08 09:36
閱讀 2742·2021-07-25 21:37
閱讀 934·2019-08-30 15:54
閱讀 2545·2019-08-30 14:22
閱讀 3256·2019-08-30 13:57
閱讀 2607·2019-08-29 17:17
