css里面z-index层叠问题

正常理解：

在 CSS 中，我们都知道 z-index 是用来来控制 HTML 的层级顺序。值越大的指数将会排在页面的最顶部。

STYLE
<style>
  .box {
    position: relative;
    width: 50px;
    height: 50px;
    border: 3px solid;
    background: silver;
  }
  .first.box {
    z-index: 2;
  }
  .second.box {
    z-index: 1;
    margin-top: -20px;
    margin-left: 20px;
  }
</style>

HTML
<div class="first box"></div>
<div class="second box"></div>

STYLE
<div class="header">4444</div>
  <div class="container">
    <div class="box">11</div>
 </div>
.header {
        position: relative;
        z-index: 3;
        width: 50px;
        height: 50px;
        border: 3px solid;
        background: blue;
    }
    .container {
        position: relative;
        z-index: 1;
    }
    .box {
      width: 50px;
      height: 50px;
      border: 3px solid;
      background: red;
      position: absolute;
      top: -29px;
    }

为什么层级越高，还是被蓝色块覆盖了？？？

CSS层级的运作方式其实和 PS 差不多： 元素们都被组合成为 stacking contexts。当我们给元素一个z-index，那么这个值只会和在相同 context 下的其他元素竞争。无关其他层级。一个简单的 HTML 文本只有一个上下文，它包括了所有的节点。 但是，我们可以添加更多的上下文！

创建上下文：最普遍的方法是通过结合两个声明，position 和 z-index :

修改以上

.container {
        position: relative;
        z-index: 8; // 修改比上文更大，或者不需要z-index
    }

如果 main 里面z-index 被删除，那么box将和header在同一个上下文，这样他两就有竞争。

  z-index: 99999999;

打破规则

如果父级真的需要 z-index 的话，怎么办？？我们可以把 box 移出 container 标签，挂在 body 标签下面，然后通过 CSS 定位.

创建层叠上下文的方法

把透明度 opacity 设置成比 1 小的值
把 position 设置为fixed或者 sticky（这种情况无需提供 z-index)
把 mix-blend-mode 设置为multiply、hard-light、difference（normal不行🙅）
把 z-index 添加到一个带有display：flex 或者 display：grid 的容器里
使用 transform，filter，clip-path，或者 perpective
把 will-change 设置为 opacity 或者 transform
** 通过 isolation: isolation 直接创建上下文 **
等等

isolate隔离

使用方式

.wrapper {
  isolation: isolate;
}

举个 🌰 以下图片。两张美女图跟蓝色背景混合了，如果想要右边美女图不跟蓝色背景混合

可以给这层div元素增加isolation:isolate，相当于创建了一个新的上下文

深入层叠上下文