z-index与层叠上下文

0.层叠上下文中的层级顺序

1. 形成堆叠上下文环境的元素的背景与边框
2. 拥有负 z-index 的子堆叠上下文元素 （负的越高越堆叠层级越低）
3. 正常流式布局，非 inline-block，无 position 定位（static除外）的子元素
4. 无 position 定位（static除外）的 float 浮动元素
5. 正常流式布局， inline-block元素，无 position 定位（static除外）的子元素（包括 display:table 和 display:inline ）
6. 拥有 z-index:0 的子堆叠上下文元素
7. 拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低）

层级越高显示在越上面

1.z-index

z-index指定了某个定位元素在所属层叠上下文出现的层级

定位元素指position不为static的元素以及flex或grid布局里的元素

当元素之间重叠的时候，z-index 较大的元素会覆盖较小的元素在上层进行显示。

2. 层叠上下文

默认情况下， 所有元素都属于根层叠上下文，即html元素

也可以通过以下方式产生新的上下文：

1. position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素；
2. position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；
3. flex (flex) 容器的子元素，且 z-index 值不为 auto；
4. grid (grid) 容器的子元素，且 z-index 值不为 auto；
5. opacity 属性值小于 1 的元素（参见 the specification for opacity）；
6. mix-blend-mode 属性值不为 normal 的元素；
7. 以下任意属性值不为 none 的元素：
   • transform
   • filter
   • backdrop-filter
   • perspective
   • clip-path
   • mask / mask-image / mask-border
8. isolation 属性值为 isolate 的元素；

z-index只能调整自己在所属上下文的层级

main {  
position: relative;  
}  
  
article {  
position: absolute;  
width: 300px;  
height: 300px;  
}  
  
.article1 {  
left: 20px;  
background-color: lightgreen;  
z-index: 1;  
}  
  
.article1>div {  
z-index: 5;  
}  
  
.article2 {  
left: 40px;  
top: 40px;  
background-color: lightblue;  
position: relative;  
z-index: 2;  
}  
  
.article2>div {  
z-index: 1;  
}  
  
div {  
position: relative;  
margin: 10px;  
height: 80px;  
background-color: lightcoral;  
}


<main>
  <article class="article1">
    article1
    <div>div1</div>
  </article>
  <article class="article2">
    article2
    <div>div2</div>
  </article>
</main>

上例中，article1 和 article2 同属html层叠上下文, 由于article2 的 z-index 大，因此显示在article1上面，且两者都创建了新的层叠上下文，div1 和 div2 分属于 article1 和article2的上下文 ，不论此时div1 的z-index多大，也不会d显示在div2上面