一、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代碼：
- <input type="submit" id="submit" />
- <label for="submit">提交</label> <!--label的 for關聯模擬，兼容性很好-->
css代碼：
- [type=submit]{ position:absolute; z-index:-1; }
以上這篇深入剖析z-index屬性就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。