1、堆(層)疊上下文是什么？

官方解釋：層疊上下文是HTML元素的三維概念，這些HTML元素在一條假想的相對(duì)于面向（電腦屏幕的）視窗或者網(wǎng)頁的用戶的z軸上延伸，HTML元素依據(jù)其自身屬性按照優(yōu)先級(jí)順序占用層疊上下文的空間。

一些屬性會(huì)觸發(fā)堆疊上下文，堆疊上下文的定義不清楚。層疊上下文由滿足以下任意一個(gè)條件的元素形成：

①根元素 (HTML),

②z-index 值不為 "auto"的?絕對(duì)/相對(duì)定位，

③一個(gè) z-index 值不為 "auto"的?flex 項(xiàng)目 (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"的元素。

在層疊上下文中，其子元素同樣也按照上面規(guī)則進(jìn)行層疊。其子元素的 z-index 值只在父級(jí)層疊上下文中有意義。如果a的父層級(jí)比b的父層級(jí)高，那么a中的所有元素都比b中元素層級(jí)高(z-index值無效)。

2、堆(層)疊順序

①background、②border、③塊級(jí)、④浮動(dòng)、⑤內(nèi)聯(lián)、⑥z-index: 0、⑦z-index: +

如果是兄弟元素重疊，那么后面寫的覆蓋前面寫的。