1：什么是堆疊順序
1：什么是堆疊上下文
參考：張鑫旭博客 css-stacking-context-order-z-index
image.png
image.png
堆疊上下文順序：
1：background
2：border
2：塊級元素
3：浮動
4：內(nèi)聯(lián)元素
5：z-index:0
5：z-index:+
如果是兄弟元素重疊，那么后面的元素覆蓋前面的元素；
下面這兩個是層疊領(lǐng)域的黃金準(zhǔn)則。當(dāng)元素發(fā)生層疊的時候，其覆蓋關(guān)系遵循下面2個準(zhǔn)則：
誰大誰上：當(dāng)具有明顯的層疊水平標(biāo)示的時候澡绩，如識別的z-indx值，在同一個層疊上下文領(lǐng)域，層疊水平值大的那一個覆蓋小的那一個丁稀。通俗講就是官大的壓死官小的。
后來居上：當(dāng)元素的層疊水平一致倚聚、層疊順序相同的時候线衫，在DOM流中處于后面的元素會覆蓋前面的元素。
在CSS和HTML領(lǐng)域惑折，只要元素發(fā)生了重疊授账，都離不開上面這兩個黃金準(zhǔn)則。因為后面會有多個實例說明惨驶，這里就到此為止白热。
堆疊上下文的特征：
- 根元素（HTML）
- z-index值不為：“auto”的絕對/相對定位
- 一個z-index值不為：“auto”的flex項目（flex item），機：父元素display：flex|inline-flex粗卜，
- opacity屬性值小于1的元素
- transform屬性值不為"none"的元素
- min-blend-mode屬性值不為"normal"的元素
- filter值不為"none"的元素
- perspective值不為"none"的元素屋确，
- isolation屬性被設(shè)置為"isolate"的元素
- position：fixed
- 在will-change中指定了任意CSS屬性，即便你沒有直接指定這些屬性的值
- -webkit-overfllow-scrolling屬性被設(shè)置"touch"的元素
