CSS中的層疊上下文
在頁面上z軸方向（垂直於頁面的方向），如果存在多個元素，那麼這些元素間的覆蓋關係是啥？遵循的規則是啥？這就是這篇文章要講述的內容。
前提聲明： 不特別說明的話，文中在提到多個元素的位置關係時，均默認這些元素在Z軸上存在重疊關係。
什麼是層疊水平
什麼是層疊上下文
層疊上下文（stacking context），可以理解爲一個對象/環境。跟 BFC（塊級格式化上下文）很接近，也是通過CSS的某些屬性設置來生成的。
舉個簡單的例子，在根元素\<html\> 中存在若干子元素，這些子元素遵循一定的順序，在根元素html中進行層疊。這時候，根元素html就可以看作是一個層疊上下文。這個層疊上下文中，元素遵循一定的順序進行覆蓋。
什麼是層疊水平
層疊水平定義了在同一個層疊上下文中，元素在Z軸上的顯示順序。記住，是在同一個層疊上下文中，在不同的層疊上下文中元素，不存在直接的層疊水平（間接意義上，取決於它們所在的層疊上下文元素的層疊水平）。
層疊順序
層疊順序定義了同一個層疊上下文中，元素在Z軸上顯示順序的規則。
“翠花，上～圖～～～”
來源：張鑫旭博客
兩條特別重要的原則
- 誰大誰上：具有較高層疊的水平的元素會覆蓋較低層疊水平的元素（官大一級壓死人）
- 後來居上：遵循同樣規則的兩個元素，後面的會覆蓋前面的元素
特別說明： 層疊水平並不是z-index的值的大小，z-index只是用來表徵層疊水平的一個參考維度。這一點可以從上圖中看出。
再簡單總結下：
- 創建了層疊上下文的元素比其他元素層級高。
- 兩個層疊上下文相遇時，後一個層級高。如果想改變層級可以使用z-index
上example說明上面那一張圖
<body>
<style>
* {
border-width: 2px;
border-style: solid;
}
</style>
<div style="z-index: 2;color: crimson; height: 50px;">z正z-index</div>
<span style="display:inline-block; height: 60px; top: -30px;background: cornflowerblue;
position: relative;"> inline / inline-block 水平盒子</span>
<p style="z-index: -1; width: 150px; height: 150px; background:powderblue; margin-top: -50px; border-color: blue;">負值
z-index</p>
<p style="width: 190px; height: 100px; background:peru; margin-top: -150px; border-color: orangered;"> Block Element</p>
<div style="float:left; width: 190px; background:darkgreen;">Float浮動盒子</div>
</body>
我們將<html>元素當作了一個層疊上下文。
會形成一個層疊上下文的條件
- 根元素：
<html>生下來就是一個層疊上下文； - z-index值爲數值的定位元素：
position:relative/absolute;的元素且 設定了z-index屬性的數字值； - CSS3屬性：
- z-index值不爲auto的flex項(父元素display:flex|inline-flex).
- 元素的opacity值不是1.
- 元素的transform值不是none.
- 元素mix-blend-mode值不是normal.
- 元素的filter值不是none.
- 元素的isolation值是isolate.
- will-change指定的屬性值爲上面任意一個。
- 元素的-webkit-overflow-scrolling設爲touch