層疊上下文是css中的一個三維概念，擁有層疊上下文的元素在z軸上比普通元素要高，而且其內部的所有內容是自成體系的，其後代都是在它的層疊順序中
哪些元素擁有層疊上下文
1、根元素，也就是html預設擁有“根層疊上下文”
2、定位元素（position: absolute/relative/fixed）的z-index不為auto，而是有具體數值時
3、擁有某些css3屬性的元素
- z-index不為auto的 flex item
- opacity的值小於1的元素
- transform不為none
- filter不為none
- isolation的值是isolate
- mix-blend-mode不為normal
- 設定了will-change
- 元素的-webkit-overflow-scrolling設為touch.
舉個例子，如一個opacity:0.6的元素是層疊上下文，在一個普通元素的上面
<div style="background: blue; opacity: 0.6;">div1</div>
<div style="background: red; margin-top: -80px">div2</div>
上面只是一個比較簡單的規則，在實際中有各種元素，那在css中不同元素的層疊順序是怎樣的呢？
css中元素的層疊順序
css中的元素的層疊順序，自底向上，遵循如下排列規則：
- border/background等裝飾在最下面
- 接著是z-index為負的元素
- block塊狀水平盒子元素
- float盒子元素
- inline、block-inline元素
- z-index為auto/0、不依賴z-index的層疊上下文元素
- z-index為正的元素
這個規則不用死記硬背，結合每種元素的作用便很好理解&記憶了
- border和background通常用作裝飾，所以優先順序最低，接著是z-index為負的元素
- block盒子和float通過用來定位佈局，而inline通常是重要的文字內容，所以有消極比block和float高
- 接著就是z-index為0或auto的元素或沒有z-index的普通層疊上下文元素了
- 最高的就是z-index為正的元素了
按照上面的層疊順序，如有衝突的話，遵循這兩個規則即可：
1、z-index大者居上
2、後來者居上
z-index
z-index定義了元素在z軸上的順序，值越大，元素的層級越高越靠上。但需要注意的是：z-index只有在定位元素和flex item上才生效，在其他元素是即便設定了也沒有用。
如下，兩個層疊上下文，第一個的z-index大，但第一個還是在下面：
<div style="background: blue;transform: translateX(50px);z-index: 5">div1</div>
<div style="background: red;transform: translateY(-80px);z-index: 1">div2</div>
而且元素一旦擁有定位，其z-index就會生效，auto被視為0級別（但實際上不是0，只是視為，此時元素還不是層疊上下文），flex item元素同理。
所以即便一個元素只設定了定位，還不是層疊上下文，但是此時該元素的z-index已經被視為0了，所以該元素會在普通元素的上面。
參考：