摘要：層疊上下文可以嵌套，內(nèi)部層疊上下文及其所有子元素均受制于外部的層疊上下文。例當(dāng)按以下設(shè)置，則出現(xiàn)紅色在綠色之上的效果。如何觸發(fā)觸發(fā)一個元素形成層疊上下文有以下方法，摘自根元素值不為的絕對相對定位一個值不為的項目，即父元素。

對于stacking context，在MDN中的描述是

Stacking context is the three-dimensional conceptualization of HTML
elements along an imaginary z-axis relative to the user who is assumed
to be facing the viewport or the webpage.HTML elements occupy this
space in priority order based on element attributes.

翻譯過來是：
層疊上下文是HTML元素的三維概念，這些HTML元素在一條假想的相對于面向（電腦屏幕的）視窗或者網(wǎng)頁的用戶的 z 軸上延伸，HTML 元素依據(jù)其自身屬性按照優(yōu)先級順序占用層疊上下文的空間。
z軸即用戶與屏幕間看不見的垂直線。

層疊水平順序決定了同一個層疊上下文中元素在z軸上的顯示順序

關(guān)于這個，有一張圖形可以形象的說明

不過上面圖示的說法有一些不準(zhǔn)確，按照 W3官方 的說法，準(zhǔn)確的 7 層為：

the background and borders of the element forming the stacking context.

the child stacking contexts with negative stack levels (most negative first).

the in-flow, non-inline-level, non-positioned descendants.

the non-positioned floats.

the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.

the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.

the child stacking contexts with positive stack levels (least positive first).

翻譯過來是：

形成層疊上下文環(huán)境的元素的背景與邊框

擁有負(fù) z-index 的子堆疊上下文元素 （負(fù)的越高越堆疊層級越低）

正常流式布局，非 inline-block，無 position 定位（static除外）的子元素

無 position 定位（static除外）的 float 浮動元素

正常流式布局， inline-block元素，無 position 定位（static除外）的子元素（包括 display:table 和 display:inline ）

擁有 z-index:0 的子堆疊上下文元素

擁有正 z-index: 的子堆疊上下文元素（正的越低越堆疊層級越低）

一個普通元素具有了層疊上下文，其層疊順序就會變高。那它的層疊順序究竟在哪個位置呢？
這里需要分兩種情況討論：

如果層疊上下文元素不依賴z-index數(shù)值，則其層疊順序是z-index:auto可看成z:index:0級別；

如果層疊上下文元素依賴z-index數(shù)值，則其層疊順序由z-index值決定。

所以為什么定位元素會層疊在普通元素的上面？其根本原因就在于，元素一旦成為定位元素，其z-index就會自動生效，此時其z-index就是默認(rèn)的auto，也就是0級別，根據(jù)上面的層疊順序表，就會覆蓋inline或block或float元素。

而不支持z-index的層疊上下文元素天然z-index:auto級別，也就意味著，層疊上下文元素和未設(shè)置z-index的定位元素是一個層疊順序的，于是當(dāng)他們發(fā)生層疊的時候，遵循的是“后來居上”準(zhǔn)則。

層疊上下文可以嵌套，內(nèi)部層疊上下文及其所有子元素均受制于外部的層疊上下文。

在同一個層疊上下文中，則根據(jù)7階層疊水平比較。若兩元素在同一層疊水平，則后來居上，即在DOM流中處于后面的元素會覆蓋前面的元素。
在不同的層疊上下文中，則直接比較父元素的層疊水平：
若父元素的z-index不同，則z-index數(shù)值越大，越在上面。
若父元素的z-index相同，則在DOM流中處于后面的元素會覆蓋前面的元素。

注：

比較時，先看兩個元素是不是在同一個父元素之下，若不是，則一層層往上找，直到找到其祖先元素在同一級時停止。然后，再依次往下尋找各自的子元素，找到第一個是層疊上下文元素的子元素后進(jìn)行比較。

子元素的 z-index 值只在父級層疊上下文中有意義。即父元素的 z-index 低于父元素另一個同級元素，子元素 z-index再高也沒用。

例：

    

        

            
div1-1-1
        
    
    

        

            
div2-1-1
        
    

當(dāng)css按以下設(shè)置，則出現(xiàn)紅色在綠色之上的效果。
原因：要比較div-1-1與div2-1-1的上下，則先找到div1與div2在同一層級。而div1為普通元素,div1-1為層疊上下文元素，div2為層疊上下文元素，所以這時候div2與div1,div1-1在同一 個層疊上下文，而div1-1的z-index為1，div2的z-index為1，DOM流中div2在div1-1之后，所以紅色在綠色之上。若此時將div1-1的z-index設(shè)置為2時，則會出現(xiàn)綠色在紅色之上的效果。

.div2 {
    position: absolute;
    z-index: 1;
}

.div1-1 {
    position: absolute;
    z-index: 1;
}

.div2-1 {
    position: absolute;
    z-index: 2;
}

.div1-1-1 {
    background-color: rgba(20, 150, 150, 0.9);
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 1px dashed #e6e6e6;
    font-size: 16px;
    position: absolute;
    z-index: 2;
}

.div2-1-1 {
    background-color: rgba(233, 2, 233, 0.5);
    width: 100px;
    height: 100px;
    margin-left: 70px;
    line-height: 100px;
    text-align: center;
    border: 1px dashed #e6e6e6;
    font-size: 16px;
    position: absolute;
    z-index: 3;
}

當(dāng)在原樣式基礎(chǔ)上，再添加一個樣式，則出現(xiàn)綠色在紅色之上的效果，是因為這時候div2與div1在同一個層疊上下文，而div1的z-index為2，div2的z-index為1，所以綠色在紅色之上。

.div1 {
    position: absolute;
    z-index: 2;
}

補(bǔ)充：

以下例子中，當(dāng)將鼠標(biāo)放在d1-inner上時，會發(fā)現(xiàn)d2在d1-inner上面。

原因：不支持z-index的層疊上下文元素天然z-index:auto級別，所以當(dāng)給d1-inner添加transform: scale(1.7,1.7);時，d1-inner在根元素的層疊上下文中的z-index:auto級別，而d2未設(shè)置z-index,所以其z-index就是默認(rèn)的auto。兩者都在根元素的層疊上下文中的z-index:auto級別，那就根據(jù)后來居上判斷。d1-inner的父元素d1在DOM流中在d2的前面，所以導(dǎo)致d2在d1-inner上面。

 

    
d1-inner
  
  

    
d2-inner
  

觸發(fā)一個元素形成層疊上下文有以下方法，摘自 MDN：

根元素 (HTML)

z-index 值不為 "auto"的 絕對/相對定位

一個 z-index 值不為 "auto"的 flex 項目 (flex item)，即：父元素 display: flex|inline-flex。（需滿足兩個條件才能觸發(fā)：1是父級需要是display:flex或者display:inline-flex水平，2是子元素的z-index不是auto，必須是數(shù)值。則這個子元素為層疊上下文元素）

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"的元素

參考自：
深入理解CSS中的層疊上下文和層疊順序
層疊順序與堆棧上下文知多少