我理解的z-index,层叠上下文，层叠顺序（DOM结构上）

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的层叠顺序，这里就不作展开。