对于z-index和层叠模型的理解

• 层叠上下文

  • 层叠上下文模型可看做CSS的三维盒子模型，有创建层叠上下文能力的元素可作为层叠容器存在，按照层叠顺序表存放其他层叠元素。
  • 一个元素，在层叠上的容器，是它的第一个具有层叠上下文能力的祖先（一直向上找到第一个能容纳它的祖先）
  • 具有创建层叠上下文能力的元素有：
    • 根元素 (HTML标签),
    • z-index 值不为 "auto"的 绝对/相对定位，
    • 一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flexinline-flex，
    • opacity 属性值小于 1 的元素（参考 the specification for opacity），
    • transform 属性值不为 "none"的元素，
    • mix-blend-mode 属性值不为 "normal"的元素，（混合模式）
    • filter值不为“none”的元素，
    • perspective值不为“none”的元素，
    • isolation 属性被设置为 "isolate"的元素，
    • position: fixed的元素
    • 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考 这篇文章）
    • -webkit-overflow-scrolling 属性被设置 "touch"的元素
• 层叠顺序：在一个层叠上下文容器里，层叠上下文元素它自己和它的直接子层叠元素是安装下表渲染的：（越先提到越早渲染）
  1. 层叠上下文元素的背景
  2. 负z-index的元素（越小越早）
  3. block元素
  4. 具有float的元素
  5. inline/inline-block盒子
  6. z-index:auto / z-index:0 (等级一样，但z-index:auto原则上不创建层叠上下文)、非因z-index创建的层叠上下文元素
  7. 正z-index的元素（越大越晚）
  8. 如果遇到相同等级的，在dom流里先遇到的先渲染，即后来居上
  9. 层叠上下文元素它自己属于2-7的其中一个 一般属于2、6、7

我们把一个 有创建层叠上下文能力的元素称之A 接下来讲一下怎么从A开始渲染 (最开始的A就是根元素HTML标签)

1. 准备一个逻辑上的空数组。
2. 把A放进数组。
3. 取出A的所有后代。
4. 对于数组里的每一个不具有创建层叠上下文能力的元素，取出它的所有后代。
5. 重复4到数组不再变化。到这一步，A的所有直接子后代还有它自己，都在数组里了。这些元素都依托A为舞台来渲染。
6. 然后把数组里的元素，按照层叠顺序渲染。
7. 去掉数组里所有不具有创建层叠上下文能力的元素。
8. 对于数组里所有具备创建层叠上下文能力的元素，它们的子孙将依托它们为舞台来渲染，因此对他们中的每一个重复1-8。

于是乎，最终渲染的效果特点：

1. 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文。
2. 每个层叠上下文和兄弟层叠上下文独立，也就是当进行层叠渲染的时候，每个层叠上下文元素只需要考虑自己盒子里的。
3. 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。（类比大版本号、爹说了算）

    
    
 * {
     margin: 0;
 }
 html {
     padding: 20px;
     font: 12px/20px Arial, sans-serif;
 }
 div {
     opacity: 0.7;
     position: relative;
 }
 h1 {
     font: inherit;
     font-weight: bold;
 }
 #div1,
 #div2 {
     border: 1px dashed #696;
     padding: 10px;
     background-color: #cfc;
 }
 #div1 {
     z-index: 5;
     margin-bottom: 190px;
 }
 #div2 {
     z-index: 2;
 }
 #div3 {
     z-index: 4;
     opacity: 1;
     position: absolute;
     top: 40px;
     left: 180px;
     width: 330px;
     border: 1px dashed #900;
     background-color: #fdd;
     padding: 40px 20px 20px;
 }
 #div4,
 #div5 {
     border: 1px dashed #996;
     background-color: #ffc;
 }
 #div4 {
     z-index: 6;
     margin-bottom: 15px;
     padding: 25px 10px 5px;
 }
 #div5 {
     z-index: 1;
     margin-top: 15px;
     padding: 5px 10px;
 }
 #div6 {
     z-index: 3;
     position: absolute;
     top: 20px;
     left: 180px;
     width: 150px;
     height: 125px;
     border: 1px dashed #009;
     padding-top: 125px;
     background-color: #ddf;
     text-align: center;
 }
    


    
 Division Element #1
 
     position: relative;

     z-index: 5;
 
    

    
 Division Element #2
 
     position: relative;

     z-index: 2;
 
    

    

 
     Division Element #4
     
  position: relative;

  z-index: 6;
     
 

 Division Element #3
 
     position: absolute;

     z-index: 4;
  

 
     Division Element #5
     
  position: relative;

      z-index: 1;
     
 

    ​​​​    
     Division Element #6
     
  position: absolute;

      z-index: 3;
  
 
    

    
    
 body {
     position: absolute;
 }
 .div1 , .div3 {
     width: 100px;
     height: 100px;
     margin-left: 100px;
     margin-top: 50px;
     background-color: yellow;
 }
 .div2 , .div4 {
     position: relative;
     width: 50px;
     height: 50px;
     margin-left: -40px;
     background-color: red;
     z-index: -1;
 }
 .div3 {
     position: relative;
     z-index: 0;
 }
    


    
 div1
 
     div2
 
    
    
    
 div3
 
     div4