如何理解z-index屬性

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

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

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

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

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

二、z-index與創建層疊上下文

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

注意有一種特殊情況，那就是IE7下，auto也會創建層疊上下文，不符合標準。

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

控制視圖時，如果父級元素沒有層疊上下文，則會一直找到根元素作為層疊上下文

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

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

當z-index的值為auto時，元素還是普通元素，當z-index的值為具體數字時，就會創建層疊上下文

②z-index值不為auto的flex項（display:flex/inline-flex;）

層疊上下文元素是flex子元素，而不是flex容器元素

4.不需要與z-index:數字  配合就可以創建層疊上下文的屬性

①元素的opacity值不為1；

②元素的transform值不為none；

③元素mix-blend-mode（混合模式）值不為normal；

④元素的filter（css3里的濾鏡，不是指IE6/7/8/9里私有的那個濾鏡）值不為none；

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

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

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

will-change的作用：增強頁面渲染性能，即準備GPU（圖形處理器）讓瀏覽器加速渲染的

什么是GPU（圖形處理器）？GPU是與處理和繪制圖形相關的硬件。 GPU是專為執行復雜的數學和幾何計算而設計的，可以讓CPU從圖形處理的任務中解放出來，從而執行其他更多的系統任務，例如，頁面的計算與重繪。

當我們通過某些行為（點擊、移動或滾動）觸發頁面進行大面積繪制的時候，瀏覽器往往是沒有準備的，只能被動使用CPU去計算與重繪，由于沒有事先準備，應付渲染夠嗆，于是掉幀，于是卡頓。而will-change則是真正的行為觸發之前告訴瀏覽器，提前預約從容不迫；突然造訪手忙腳亂。

⑧元素的-webkit-overflow-scrolling設為touch（移動端特有的原生的滾動）

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

6.為何定位元素會覆蓋普通元素？

例如當圖片使用了position：relative；此時圖片z-index：auto；這時圖片的的層疊順序 > 內聯元素（普通的圖片文字是內聯元素，層疊順序是inline/inline-block），所以會覆蓋。

三、z-index相關實踐時注意的一些原則

1.最小化影響原則

目的：避免z-index嵌套層疊關系混亂

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

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

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

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

2.不犯二準則

目的：避免z-index混亂，出現一山比一山高的樣式問題

原因：多人協作以及后期維護

做法：對于非浮層元素，避免設置z-index值，z-index沒有任何道理需要超過2

（浮層元素：比如彈框，在頁面里拖來拖去）

3.組件層級計數器

目的：避免浮層組件因z-index背覆蓋的問題

原因：①總會遇到意想不到的高層級元素（比如其他團隊介入，或者使用網上的其他組件）

②組件的覆蓋規則具有動態性（比如一個頁面有好多個彈框）

做法：組件層級計數器方法：通過js獲得body下子元素的最大z-index值，

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

4.可訪問性隱藏   人肉眼看不見，但是輔助設備可以識別的隱藏

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

做法：z-index:-1;

eg：html代碼：

XML/HTML Code復制內容到剪貼板

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

2. <label for="submit">提交</label>   <!--label的 for關聯模擬，兼容性很好-->    

css代碼：

XML/HTML Code復制內容到剪貼板

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

關于如何理解z-index屬性就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。