层叠上下文(stacking context)

• z-index 属性设定了一个定位元素(position不等于static)及其后代元素或flex 项目的 z-order。 当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示

• z-index 属性指定：
  盒子在当前层叠上下文中的层叠层级。
  盒子是否创建一个本地层叠上下文。

• 当任何一个元素层叠另一个包含在不同stacking context元素时，则会以stacking context的层叠级别（stack level）来决定显示的先后情况。也就是说，在相同的stacking context下才会用z-index来决定先后，不同时则由stacking context的z-index来决定。
  例如：
  定位元素A（z-index:100）里面有定位元素A1（z-index:300），而定位元素B和元素A兄弟关系（z-index:200）。你会发现无论A1的z-index是多大，也会被z-index是200的B所覆盖，因为A的z-index只有100

• 例：

<style>
  .box1 {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: antiquewhite;
    /* z-index: 1; */         
  }
  .box2 {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: aqua;
    z-index: 10;
  }
  .box3 {
    position: absolute;
    width: 150px;
    height: 150px;
    background-color: red;
    z-index: 2;
  }
</style>

<div class="box3"></div>
<div class="box1">
  <div class="box2"></div>
</div>
<!-- 这里box1没有设置 z-index，没有生成层叠上下文，所以此时box1还是处于根元素(html)的层叠上下文中   即 "没有创建自己的层叠上下文的元素会被父层叠上下文同化"-->

• 层叠规则：
  谁大谁上：z-indx值大的在上。
  后来居上：层叠水平一致(z-index相同)、层叠顺序相同时。

• 形成层叠上下文：(与z-index无关的属性形成的层叠上下文默认层叠水平一致)

  1. position 值为 absolute（绝对定位）或 relative（相对定位）且 z-index 值不为 auto 的元素;
  2. position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素;
  3. flex容器的子元素，且 z-index 值不为 auto;
  4. opacity 属性值小于 1 的元素;
  5. transform属性不为none;
     

• 层叠等级顺序从低到高排列如下:

  1. background-color
  2. background-image
  3. border
  4. z-index 为负数
  5. 块级普通元素
  6. float盒子
  7. inline和inline-block盒子
  8. 等位元素
  9. 不依赖 z-index的创建层叠上下文元素
  10. z-index >= 0 的元素
  • 1~3指的是创建当前层叠上下文的元素的背景和边框。这是一个易错点：当比较层叠等级时，往往会把dom树结构上的父元素背景视为一个层叠等级，但是父元素并不是创建当前层叠上下文的元素。

正确做法是，首先确定创建当前层叠上下文的元素是什么，然后不要受dom结构的影响，按照上面给出顺序排列元素等级。这些元素中有些能够创建新的层叠上下文，这可视为一个断层，新层叠上下文中的元素先跳过，等排列完当前层叠上下文的所有元素，再去排列子层叠上下文的元素。