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

第一步：基本概念。

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

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

第二步：層疊順序。

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

• 層疊上下文background/border；
• 負z-index；
• block塊狀盒子模型；
• float浮動盒子；
• z-index爲auto或當作0的不依賴z-index的上下文；
• z-index爲auto或當作0；
• 正z-index。

第三步：產生條件。

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

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

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

• 一個被設置了display:flex的元素包含的元素對其設置z-index爲數值時其會產生層疊上下文；
• 設置了opacity不爲1的元素會產生層疊上下文；
• 設置了transform不爲none的元素會產生層疊上下文；
• 設置了mix-blend-mode不爲normal的元素會產生層疊上下文；
• 設置了filter不爲none的元素會產生層疊上下文；
• 設置了isolation:isolate的元素會產生層疊上下文；
• 設置了-webkit-overflow-scrolling的元素會產生層疊上下文（移動端）；
• 設置了will-change的元素會產生層疊上下文。