一、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（移動端特有的原生的滾動）