1紊搪，堆疊順序
1蜜葱，background，
2耀石，border牵囤，
3，塊級(jí)元素滞伟，
4揭鳞，浮動(dòng)元素，
5梆奈，內(nèi)聯(lián)元素野崇，
6，絕對(duì)/相對(duì)定位{
z-index:0亩钟；
z-index:為正乓梨；
}
堆疊順序.png
如果是兄弟元素重疊，那么后面的覆蓋前面的清酥。
z-index只出現(xiàn)在定位里扶镀，正的z-index堆疊順序最靠近用戶，負(fù)z-index離用戶最遠(yuǎn)总处。
z-index:1 會(huì)蓋住z-index:0狈惫。
但如果整個(gè)div是相對(duì)定位了一個(gè) -z-index應(yīng)在Border和塊級(jí)元素之間。
2鹦马，堆疊上下文（The Stacking context）
堆疊上下文并沒有明確的定義胧谈，只有出現(xiàn)了一些元素時(shí)才會(huì)觸發(fā)堆疊上下文，如：
- 根元素 (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"的元素
如果后面父元素的z-index值比前一個(gè)的z-index值大的話褒繁，那么這個(gè)后面的父元素里所有子元素都會(huì)蓋住前一個(gè)父元素的子元素亦鳞。不管前一個(gè)父元素里子元素z-index值是不是比后一個(gè)父元素里子元素的z-index值大還是小，都會(huì)被后面的蓋住棒坏。
