首先我們需要了解css中堆疊順序的概念
在沒有觸發(fā)堆疊上下文時锨络，正常的堆疊順序應(yīng)該為：
負z-index<background<border<塊級元素<浮動元素<文字/內(nèi)聯(lián)元素<定位元素<正z-index （如果是兄弟同級元素春霍，后出現(xiàn)的屬性會覆蓋前一個屬性）
現(xiàn)在我們引入堆疊上下文的概念
在MDN文檔上對堆疊上下文的定義是：
【層疊上下文是HTML元素的三維概念，這些HTML元素在一條假想的相對于面向（電腦屏幕的）視窗或者網(wǎng)頁的用戶的z軸上延伸力喷，HTML元素依據(jù)其自身屬性按照優(yōu)先級順序占用層疊上下文的空間】
根據(jù)字面定義我們很難理解堆疊上下文刽漂，所以我們先了解堆疊上下文的特性演训，知道什么樣的特性會觸發(fā)堆疊上下文
以下是MDN給出的觸發(fā)堆疊上下文的元素特性：
- 根元素 (HTML),
- z-index 值不為 "auto"的 絕對/相對定位，
- 一個 z-index 值不為 "auto"的 flex 項目 (flex item)贝咙，即：父元素 display: flex|inline-flex样悟，
-
opacity屬性值小于 1 的元素（參考 the specification for opacity）， -
transform屬性值不為 "none"的元素庭猩， -
mix-blend-mode屬性值不為 "normal"的元素窟她， -
filter值不為“none”的元素， -
perspective值不為“none”的元素蔼水， -
isolation屬性被設(shè)置為 "isolate"的元素震糖， position: fixed- 在
will-change中指定了任意 CSS 屬性，即便你沒有直接指定這些屬性的值（參考 這篇文章） -
-webkit-overflow-scrolling屬性被設(shè)置 "touch"的元素
那么趴腋，堆疊上下文到底有什么用呢吊说？
在這里我們先思考一個問題，一個元素X設(shè)置了z-index:999优炬；這個元素X一定是離用戶最近的元素嗎颁井？
答案當(dāng)然不是。從定義中我們可以看到堆疊上下文可以對元素的z-index產(chǎn)生影響蠢护。當(dāng)某個元素觸發(fā)了堆疊上下文雅宾，就相當(dāng)于形成了一個小部門，假如這個堆疊上下文的z-index比元素X的堆疊上下文的z-index要高,這時候在小部門里的元素都要比元素X要高葵硕，因為這個部門本身就比X所處的部門高級眉抬。
由此可以看出堆疊上下文會影響元素的z-index。
以上是對堆疊上下文的一個簡單理解懈凹，如有錯誤蜀变，歡迎指出。
