認識CSS中的z-index元素層級屬性

Z-index：指定了元素及其子元素的Z軸順序，在Z元素髮生覆蓋的時候，哪一個在下面，哪一個在上面，通常都由Z-index來決定。Z-index的支持的屬性值有：z-index:auto/整數/inherit;基本特性有：支持負值，支持animation動畫，在css2.1中，須要和定位元素配合使用；若是不考慮CSS3，z-index只對定位元素起做用；

z-index的使用：

    一、若是定位元素不發生嵌套，便是同級元素 ，則遵循「後來居上」和「大小」原則；

    二、若是發生嵌套，則遵循「祖先優先」原則，由父級元素的z-index決定，前提是父級元素的z-index值爲數值，此時會忽略子代元素的z-index值；

css中的層疊上下文和層級水平：層疊上下文簡單的說就是一個包含了一組堆疊層的元素，它們在Z軸上有着特定的順序，頁面根元素和由z-index爲數值的定位元素具備層疊上下文；

層級水平：它決定了同一個層疊上下文中的元素在Z軸上的顯示順序，和z-index並不一樣；

層疊上下文的特色：能夠嵌套，組成分層次的層疊上下文；每一個層疊上下文和兄弟元素獨立，當進行層疊變化時，隻影響子元素；

著名的7階層疊水平：

小解答：一、爲何inline/liline-block的層級水平大於float的層級水平？

由於行內元素通常承載的是內容，爲了符合頁面加載的美觀，因此行內元素會覆蓋浮動元素；

二、爲何定位元素會覆蓋普通元素？

由於定位元素z-index:0;而普通元素爲行內元素或浮動元素，根據7階層疊水平表，普通元素和浮動元素都會被覆蓋；

3:z-index:0爲何不等於z-index:auto?

由於z-index:0;會建立層疊上下文，而z-index:auto；不會，但他們在層疊順序上是同樣的；

其餘CSS屬性影響層疊上下文的層疊順序：

一、z-index的值不爲auto的flex項；

二、元素的opacity不是1；

三、元素的transform不是none;

四、元素的mix-blend-mode的值不是normal;

五、元素的filter值不是none;

六、元素的position:fixed聲明；

七、移動端的webkit-overflow-scrolling設爲otuch;

八、will-change指定的屬性中的任何一個；

使用z-index須要注意的問題：

一、最小化原則;爲了不z-index嵌套層疊關係混亂，儘可能避免使用定位屬性；

二、「不超2」原則：非浮層元素，避免設置z-index值超過2，通常在0,1,2；能夠經過調節DOM節點的書序來講實現；

三、浮層組件計數器：爲了不浮層組件被z-index值高 的元素覆蓋，經過JS獲取body下子元素層級最高數，將浮層的z-index值設爲+1；

4：可訪問性隱藏：z-index:-1;

參考：http://www.zhangxinxu.com/wordpress/?p=5115