如何理解z-index屬性

這篇文章給大家介紹如何理解z-index屬性，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

一、z-index七階層疊順序表

1.層疊順序的大小比較：

background/border < 負(fù)z-index < block塊狀水平盒子 < float浮動(dòng)盒子 < inline/inline-block水平盒子 < z-index:auto或者看成z-index:0 /不依賴z-index的層疊上下文< 正z-index。

2.層疊順序級(jí)別高的元素覆蓋級(jí)別低的元素。

二、z-index與創(chuàng)建層疊上下文

1.首先要注意，z-index:auto 雖然可以看作z-index:0 ，但是這僅僅是在層疊順序的比較上；從層疊上下文上講，二者有本質(zhì)差別：auto 不會(huì)創(chuàng)建層疊上下文，z-index:0 會(huì)創(chuàng)建層疊上下文。

注意有一種特殊情況，那就是IE7下，auto也會(huì)創(chuàng)建層疊上下文，不符合標(biāo)準(zhǔn)。

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

控制視圖時(shí)，如果父級(jí)元素沒(méi)有層疊上下文，則會(huì)一直找到根元素作為層疊上下文

3.z-index:數(shù)字 + 元素屬性 配合得到層疊上下文

①position:absolute/relative以及FireFox/IE下的position:fixed;

當(dāng)z-index的值為auto時(shí)，元素還是普通元素，當(dāng)z-index的值為具體數(shù)字時(shí)，就會(huì)創(chuàng)建層疊上下文

②z-index值不為auto的flex項(xiàng)（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里私有的那個(gè)濾鏡）值不為none；

⑤元素的isolation（隔離）值是isolate（元素是孤立的）

isolation:isolate這個(gè)聲明是mix-blend-mode應(yīng)運(yùn)而生的。 默認(rèn)情況下，mix-blend-mode會(huì)混合z軸所有層疊在下面的元素，如果我們不希望某個(gè)層疊的元素參與混合就可以使用isolation:isolate。

⑥position：fixed聲明，部分瀏覽器（FireFox/IE）需要z-index:數(shù)字 配合 ⑦will-change指定的屬性值為上面任意一個(gè)

will-change的作用：增強(qiáng)頁(yè)面渲染性能，即準(zhǔn)備GPU（圖形處理器）讓瀏覽器加速渲染的

什么是GPU（圖形處理器）？GPU是與處理和繪制圖形相關(guān)的硬件。 GPU是專(zhuān)為執(zhí)行復(fù)雜的數(shù)學(xué)和幾何計(jì)算而設(shè)計(jì)的，可以讓CPU從圖形處理的任務(wù)中解放出來(lái)，從而執(zhí)行其他更多的系統(tǒng)任務(wù)，例如，頁(yè)面的計(jì)算與重繪。

當(dāng)我們通過(guò)某些行為（點(diǎn)擊、移動(dòng)或滾動(dòng)）觸發(fā)頁(yè)面進(jìn)行大面積繪制的時(shí)候，瀏覽器往往是沒(méi)有準(zhǔn)備的，只能被動(dòng)使用CPU去計(jì)算與重繪，由于沒(méi)有事先準(zhǔn)備，應(yīng)付渲染夠嗆，于是掉幀，于是卡頓。而will-change則是真正的行為觸發(fā)之前告訴瀏覽器，提前預(yù)約從容不迫；突然造訪手忙腳亂。

⑧元素的-webkit-overflow-scrolling設(shè)為touch（移動(dòng)端特有的原生的滾動(dòng)）

5.不支持z-index層疊上下文元素的層疊順序均是z-index:auto;

6.為何定位元素會(huì)覆蓋普通元素？

例如當(dāng)圖片使用了position：relative；此時(shí)圖片z-index：auto；這時(shí)圖片的的層疊順序 > 內(nèi)聯(lián)元素（普通的圖片文字是內(nèi)聯(lián)元素，層疊順序是inline/inline-block），所以會(huì)覆蓋。

三、z-index相關(guān)實(shí)踐時(shí)注意的一些原則

1.最小化影響原則

目的：避免z-index嵌套層疊關(guān)系混亂

原因：①元素的層疊水平主要由所在的層疊上下文決定

②IE7 z-index:auto;也會(huì)新建層疊上下文

做法：①避免使用定位屬性

②定位屬性從大容器平級(jí)分離為私有小容器（relative課程）

2.不犯二準(zhǔn)則

目的：避免z-index混亂，出現(xiàn)一山比一山高的樣式問(wèn)題

原因：多人協(xié)作以及后期維護(hù)

做法：對(duì)于非浮層元素，避免設(shè)置z-index值，z-index沒(méi)有任何道理需要超過(guò)2

（浮層元素：比如彈框，在頁(yè)面里拖來(lái)拖去）

3.組件層級(jí)計(jì)數(shù)器

目的：避免浮層組件因z-index背覆蓋的問(wèn)題

原因：①總會(huì)遇到意想不到的高層級(jí)元素（比如其他團(tuán)隊(duì)介入，或者使用網(wǎng)上的其他組件）

②組件的覆蓋規(guī)則具有動(dòng)態(tài)性（比如一個(gè)頁(yè)面有好多個(gè)彈框）

做法：組件層級(jí)計(jì)數(shù)器方法：通過(guò)js獲得body下子元素的最大z-index值，

例如組件默認(rèn)是m，而body最大是n（n>m），那么就把組件設(shè)置為n+1

4.可訪問(wèn)性隱藏   人肉眼看不見(jiàn)，但是輔助設(shè)備可以識(shí)別的隱藏

z-index負(fù)值元素在層疊上下文的背景之上，其他元素之下

做法：z-index:-1;

eg：html代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. <input type="submit" id="submit" />    

2. <label for="submit">提交</label>   <!--label的 for關(guān)聯(lián)模擬，兼容性很好-->    

css代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1. [type=submit]{ position:absolute; z-index:-1; }    

關(guān)于如何理解z-index屬性就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。