作者：心葉
時間：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的元素會產生層疊上下文。