摘要：主要從以下途徑學(xué)習(xí)張鑫旭大大的博文層疊順序?qū)盈B順序遵循下圖的規(guī)則，其中在張鑫旭大大的博文中提到的層疊順序與圖中是一個的實際上和單純從層疊水平上看，可以認(rèn)為是同一兩者在層疊上下文領(lǐng)域有著根本性的差異。

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

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

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

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

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

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

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

每個層疊上下文是自包含的：當(dāng)元素的內(nèi)容發(fā)生層疊后，整個該元素將會 在父層疊上下文中 按順序進(jìn)行層疊。

html元素

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

position: fixed的元素

應(yīng)用了某些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屬性相關(guān)。

demo通用HTML代碼

    
outter
      
inner
    

基礎(chǔ)CSS（沒有創(chuàng)建層疊上下文）。所有demo都是在這份CSS的基礎(chǔ)上寫出來的。

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

當(dāng)outter的position值為relative或absolute，并且不設(shè)置z-index值或者z-index值為auto時，outter沒有創(chuàng)建層疊上下文。此時根據(jù)層疊順序表，負(fù)的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值設(shè)置為absolute或者relative，但z-index值設(shè)置為auto，此時，outter并沒有創(chuàng)建層疊上下文，所以，效果與基礎(chǔ)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;
    }

當(dāng)outter的z-index值設(shè)置為數(shù)值，甚至為0時，outter會創(chuàng)建層疊上下文，此時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;
    }

當(dāng)outter的position值設(shè)置為fixed時，outter會創(chuàng)建層疊上下文，此時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;
    }

當(dāng)outter的opacity值設(shè)置小于1時，outter會創(chuàng)建層疊上下文，此時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;
    }

當(dāng)outter的opacity值設(shè)置不為none時，outter會創(chuàng)建層疊上下文，此時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;
    }

當(dāng)outter的will-change值設(shè)置為任何值時，outter會創(chuàng)建層疊上下文，此時inner會覆蓋outter。
查看demo

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

此處的HTML結(jié)構(gòu)有點不同。

  
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，并設(shè)置display值為flex或者inline-flex，此時outter為flex項，會創(chuàng)建層疊上下文，此時inner會覆蓋outter。
查看demo

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

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