層疊上下文是乙個概念上的東西，學過編譯原理的人應該對這裡的上下文很清楚，而層疊不過就是乙個詞罷了，解釋一下就是，根據層疊規則決定位置的乙個環境。還需要注意的一點是，具有層疊上下文的元素比普通元素要更靠近眼睛。
層疊水平也是乙個概念上的東西，用大白話說就是：在乙個層疊上下文的環境下，裡面的元素在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的元素會產生層疊上下文。
層疊上下文與z index
z index是咱們之前相對比較常用的乙個語法了，看起來比較簡單的樣子，實際上還真不難，因為這東西跟之前講的vertical align不一樣，這個比較符合咱們的認知。好了，不廢話，開始咱們的正式話題。首先呢？咱們先要了解一下層疊上下文 stack context 是什麼呢，其實通俗來講，就是你看電...
層疊上下文
本文是我學習層疊上下文的總結。主要從以下途徑學習 mdn 張鑫旭大大的博文 層疊順序遵循下圖的規則，其中在張鑫旭大大的博文中提到inline block的層疊順序與圖中inline box是乙個level的 z index auto實際上和z index 0單純從層疊水平上看，可以認為是同一leve...
層疊上下文與層疊順序
參考文章 深入理解css中的層疊上下文和層疊順序 css深入理解之z index css深入理解之relative 先來弄清楚什麼是，層疊上下文。層疊上下文，英文稱作 stacking context 是html中的乙個三維的概念。如果乙個元素含有層疊上下文，我們可以理解為這個元素在z軸上就 高人一...