Z-index 層疊上下文和層疊水平

做者：心葉
時間：2018-04-27 11:49

第一步：基本概念。

層疊上下文是一個概念上的東西，學過編譯原理的人應該對這裏的上下文很清楚，而層疊不過就是一個詞罷了，解釋一下就是，根據層疊規則決定位置的一個環境。還須要注意的一點是，具備層疊上下文的元素比普通元素要更靠近眼睛。

層疊水平也是一個概念上的東西，用大白話說就是：在一個層疊上下文的環境下，裏面的元素在z軸上的排列順序的規則，而層疊順序就是這裏說的具體規則，是實踐的東西。

第二步：層疊順序。

須要記住的是，內部的層疊上下文及其子元素均受制於外部的層疊上下文，下面是層疊順序，從遠到近。

1.層疊上下文background/border；

2.負z-index；

3.block塊狀盒子模型；

4.float浮動盒子；

5.z-index爲auto或當作0的不依賴z-index的上下文；

6.z-index爲auto或當作0；

7.正z-index。

第三步：產生條件。

根層疊上下文（指的是頁面根元素，也就是 元素）。

定位元素與傳統層疊上下文（使用了position:absolute、position:fixed或position:relative的定位元素，且z-index的值是數字會產生疊上下文）。

CSS3與新時代的層疊上下文:

1.一個被設置了display:flex的元素包含的元素對其設置z-index爲數值時其會產生層疊上下文；

2.設置了opacity不爲1的元素會產生層疊上下文；

3.設置了transform不爲none的元素會產生層疊上下文；

4.設置了mix-blend-mode不爲normal的元素會產生層疊上下文；

5.設置了filter不爲none的元素會產生層疊上下文；

6.設置了isolation:isolate的元素會產生層疊上下文；

7.設置了-webkit-overflow-scrolling的元素會產生層疊上下文（移動端）；

8.設置了will-change的元素會產生層疊上下文。