摘要：主要從以下途徑學(xué)習(xí)張?chǎng)涡翊蟠蟮牟┪膶盈B順序?qū)盈B順序遵循下圖的規(guī)則，其中在張?chǎng)涡翊蟠蟮牟┪闹刑岬降膶盈B順序與圖中是一個(gè)的實(shí)際上和單純從層疊水平上看，可以認(rèn)為是同一兩者在層疊上下文領(lǐng)域有著根本性的差異。

本文是我學(xué)習(xí)層疊上下文的總結(jié)。主要從以下途徑學(xué)習(xí)：
MDN： https://developer.mozilla.org...
張?chǎng)涡翊蟠蟮牟┪模篽ttp://www.zhangxinxu.com/wor...

層疊順序遵循下圖的規(guī)則，其中在張?chǎng)涡翊蟠蟮牟┪闹刑岬絠nline-block的層疊順序與圖中inline box是一個(gè)level的；z-index:auto實(shí)際上和z-index:0單純從層疊水平上看，可以認(rèn)為是同一level（兩者在層疊上下文領(lǐng)域有著根本性的差異）。（如要看完整圖片請(qǐng)移步到張?chǎng)涡翊蟠蟛┪模?/p>

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

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

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

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

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

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

html元素

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

position: fixed的元素

應(yīng)用了某些CSS3的元素

z-index的值不為auto的flex項(xiàng)（即父元素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的例子的效果圖（點(diǎn)擊查看代碼與效果）

下面是我自己寫的一些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時(shí)，outter沒有創(chuàng)建層疊上下文。此時(shí)根據(jù)層疊順序表，負(fù)的z-index元素在block元素下面，所以，inner被outter覆蓋了。
查看demo

相對(duì)/絕對(duì)定位

    .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，此時(shí)，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時(shí)，outter會(huì)創(chuàng)建層疊上下文，此時(shí)inner會(huì)覆蓋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時(shí)，outter會(huì)創(chuàng)建層疊上下文，此時(shí)inner會(huì)覆蓋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時(shí)，outter會(huì)創(chuàng)建層疊上下文，此時(shí)inner會(huì)覆蓋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時(shí)，outter會(huì)創(chuàng)建層疊上下文，此時(shí)inner會(huì)覆蓋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è)置為任何值時(shí)，outter會(huì)創(chuàng)建層疊上下文，此時(shí)inner會(huì)覆蓋outter。
查看demo

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

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

  
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外層加一個(gè)class為box的div，并設(shè)置display值為flex或者inline-flex，此時(shí)outter為flex項(xiàng)，會(huì)創(chuàng)建層疊上下文，此時(shí)inner會(huì)覆蓋outter。
查看demo

其他
由于暫時(shí)對(duì)mix-blend-mode、filter、isolation、-webkit-overflow-scrolling屬性了解不多，所以沒有做demo。如果想看demo效果，可以看張?chǎng)涡翊蟠蟮牟┪摹?/p> 結(jié)語

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