1-什麼是層疊上下文

按照我自己的理解還有查詢到的資料

• 層疊上下文是基於Z軸的一個環境，這個環境其實一直都存在。
  
  • 它的預設層疊順序原則是：
    
    • 同級元素中，後面的元素覆蓋前面的元素，
    • 父子元素中，子元素覆蓋父元素
• 層疊順序，就是層疊上下文元素在層疊上下文中的前後順序
  舉個例子

<!--DOM結構-->
  <div class="oneContainer">
        <div class="itemGreen"></div>
        <div class="itemRed"></div>
  </div
 
>

//css部分
.oneContainer{
        width:300px;
        height: 300px;
        background: yellow;
 }
.itemGreen{
        width: 150px;
        height: 150px;
        background: green;
}
.itemRed{
        width: 150px;
        height: 150px;
        background: red;
        margin-top: -50px;
        margin-left
 
:50px;
}

結果顯示

根據上面的圖片，可以知道預設的順序層疊都是成立的

2-控制元素在層疊上下文中的位置

如果我們想控制一個元素在層疊上下文中的位置，那麼必須在css上增加兩個東西

• position 增加一個css屬性，但是這個定位不能是static
• z-index 增加一個z-index的屬性，這個屬性控制元素在Z軸上面的位置

舉個例子
還是上面的例子

        .itemGreen{
          width: 150px;
          height: 150px;
          background: green;
          position
 
: relative;
          z-index: 2;
        }
        .itemRed{
          width: 150px;
          height: 150px;
          background: red;
          margin-top: -50px;
          margin-left:50px;
          position: relative;
          z-index: 1;
        }

我們為上面的例子中的 itemGreen類和itemRed類增加了定位和z-index;

答案是非常明顯的，綠色的z-index比紅色的高，所以就可以控制z軸的位置
另外，沒有這兩個css屬性的元素z軸的位置其實是0，或者auto，它們的預設原則還是預設的層疊順序
即

• 它的預設層疊順序原則是：
  
  • 同級元素中，後面的元素覆蓋前面的元素，
  • 父子元素中，子元素覆蓋父元素

3-層疊上下文中的父子元素巢狀情況

在父子元素巢狀中，首先要分析幾種情況

*這裡有個小說明，為了方便書寫，這邊將控制z軸前後順序的定位和z-index這兩個css屬性簡單寫為這兩個css屬性

• 首先是父元素有沒有具備兩個css屬性，而子元素有這兩個css屬性，且不含子元素
• 如果是父元素中的具備這兩個css屬性，而子元素沒有這兩個css屬性，且不含子元素
• 如果A元素的子元素B含有一個子元素C，
  
  • 第一種情況，父元素沒有這兩個css屬性，子元素有，那麼子元素就可以控制z軸的層疊順序
  • 第二種情況，父元素有這個兩個css屬性，子元素沒有，父元素不能控制自身在z軸上的層疊順序
  • 第三種情況，A元素含有一個子元素B，且這個子元素B還有一個子元素C，無論這ABC含有這兩個css的情況是多麼複雜，記住一句話就行了，一個元素想控制自身的z軸層疊順序，必須滿足DOM上的這些結構， 這個元素不能含有子元素，且這個子元素的第一個父元素不能控制自身的z軸層疊順序，即不能含有定位和z-index這兩個css屬性。，這句話同樣適用第一種和第二種情況。

小結，除了在DOM上的結構會影響到元素控制z軸上面的層疊順序，css某些屬性也會影響z的層疊順序，這裡就不作展開。