摘要：主要從以下途徑學習張鑫旭大大的博文層疊順序層疊順序遵循下圖的規則，其中在張鑫旭大大的博文中提到的層疊順序與圖中是一個的實際上和單純從層疊水平上看，可以認為是同一兩者在層疊上下文領域有著根本性的差異。

本文是我學習層疊上下文的總結。主要從以下途徑學習：
MDN： https://developer.mozilla.org...
張鑫旭大大的博文：http://www.zhangxinxu.com/wor...

層疊順序遵循下圖的規則，其中在張鑫旭大大的博文中提到inline-block的層疊順序與圖中inline box是一個level的；z-index:auto實際上和z-index:0單純從層疊水平上看，可以認為是同一level（兩者在層疊上下文領域有著根本性的差異）。（如要看完整圖片請移步到張鑫旭大大博文）

根據上圖，層疊水平越大，就顯示在越上面。

當層疊水平一樣時，在DOM中位置越后，就顯示在越上面。

層疊上下文的層疊水平比普通元素高；

層疊上下文可以嵌套，內部層疊上下文及其所有子元素都受限于外部的層疊上下文；

層疊上下文和兄弟元素獨立，只需要考慮后代元素；

每個層疊上下文是自包含的：當元素的內容發生層疊后，整個該元素將會 在父層疊上下文中 按順序進行層疊。

html元素

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

position: fixed的元素

應用了某些CSS3的元素

z-index的值不為auto的flex項（即父元素display: flex | inline-flex）

opacity小于1的元素

transform值不為none元素

min-blend-mode值不為none的元素

filter值不為none的元素

perspective值不為none的元素

isloation值為isolate的元素

will-change指定了任意屬性

-webkit-overflow-scrolling值為touch的元素

先放MDN的例子的效果圖（點擊查看代碼與效果）

下面是我自己寫的一些demo，主要與z-index屬性相關。

demo通用HTML代碼

    
outter
      
inner
    

基礎CSS（沒有創建層疊上下文）。所有demo都是在這份CSS的基礎上寫出來的。

    .outter {
        width: 200px;height: 300px;background: red;
    }
    
    .inner {
      position: relative; z-index: -1;
      
      width: 300px;height: 200px;background: blue;
    }

當outter的position值為relative或absolute，并且不設置z-index值或者z-index值為auto時，outter沒有創建層疊上下文。此時根據層疊順序表，負的z-index元素在block元素下面，所以，inner被outter覆蓋了。
查看demo

相對/絕對定位

    .outter {
      position: relative;z-index: auto;
      
      width: 200px;height: 300px;background: red;
    }
    
    .inner {
      position: relative; z-index: -1;
      
      width: 300px;height: 200px;background: blue;
    }

雖然outter的position值設置為absolute或者relative，但z-index值設置為auto，此時，outter并沒有創建層疊上下文，所以，效果與基礎demo一致。
查看demo

    .outter {
      position: relative;z-index: 0;
      
      width: 200px;height: 300px;background: red;
    }
    
    .inner {
      position: relative; z-index: -1;
      
      width: 300px;height: 200px;background: blue;
    }

當outter的z-index值設置為數值，甚至為0時，outter會創建層疊上下文，此時inner會覆蓋outter。
查看demo

position: fixed的元素

    .outter {
      position: fixed;
      
      width: 200px;height: 300px;background: red;color: #fff;
    }
    
    .inner {
      position: relative;z-index: -1;
      
      width: 300px;height: 200px;background: blue;
    }

當outter的position值設置為fixed時，outter會創建層疊上下文，此時inner會覆蓋outter。
查看demo

opacity小于1的元素

    .outter {
      opacity: .5;
      
      width: 200px;height: 300px;background: red;color: #fff;
    }
    
    .inner {
      position: relative;z-index: -1;
      
      width: 300px;height: 200px;background: blue;
    }

當outter的opacity值設置小于1時，outter會創建層疊上下文，此時inner會覆蓋outter。
查看demo

transform值不為none元素

    .outter {
      transform: rotate(15deg);
      
      width: 200px;height: 300px;background: red;color: #fff;
    }
    
    .inner {
      position: relative;z-index: -1;
      
      width: 300px;height: 200px;background: blue;
    }

當outter的opacity值設置不為none時，outter會創建層疊上下文，此時inner會覆蓋outter。
查看demo

will-change指定了任意屬性

   .outter {
      will-change: transform; 
      
      width: 200px;height: 300px;background: red;color: #fff;
    }
    
    .inner {
      position: relative;z-index: -1;
      
      width: 300px;height: 200px;background: blue;
    }

當outter的will-change值設置為任何值時，outter會創建層疊上下文，此時inner會覆蓋outter。
查看demo

z-index的值不為auto的flex項（即父元素display: flex | inline-flex）

此處的HTML結構有點不同。

  
outter
    
inner
  

    .box {
      display: flex;
    }
    .outter {
      z-index: 1;
      
      width: 200px;height: 300px;background: red;color: #fff;
    }
    
    .inner {
      position: relative;z-index: -1;
      
      width: 300px;height: 200px;background: blue;
    }

在原來的HTML外層加一個class為box的div，并設置display值為flex或者inline-flex，此時outter為flex項，會創建層疊上下文，此時inner會覆蓋outter。
查看demo

其他
由于暫時對mix-blend-mode、filter、isolation、-webkit-overflow-scrolling屬性了解不多，所以沒有做demo。如果想看demo效果，可以看張鑫旭大大的博文。

學習了層疊上下文之后，對于元素覆蓋這個問題有了比較清晰的認識，有時候可以不依賴z-index來解決問題了。