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
![CSS的僞元素和僞類的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)