深入理解CSS中的层叠上下文（z-index）

一、层叠上下文的概念

CSS中的层叠上下文是指一组相关元素在3D空间中按照一定的顺序堆叠起来，类似于一个立体的叠加图层。对于同一个层叠上下文中的元素来说，它们的层级关系是由z-index属性来控制的。对于不同层叠上下文中的元素，它们的层级关系是由它们在文档流中的位置确定的。

一个元素的层叠上下文可以通过以下方式创建:

1. 根元素(html)
2. 定位元素(position:absolute/fixed, transform, opacity, filter)
3. flex容器（display:flex|inline-flex元素的直接子元素）
4. grid容器（display:grid|inline-grid元素的直接子元素）
5. canvas（canvas元素及其子元素）
6. iframe
7. z-index值不为auto的元素
8. mix-blend-mode值不为normal的元素

二、层叠上下文的优先级

对于同层级的元素，他们的层叠关系是由它们在文档流中的位置和z-index值来确定。当两个元素发生重叠时，层叠上下文的优先级可以按照以下规则进行判断：

1. 层叠上下文总是位于普通元素之上。如果两个层叠上下文的元素相交，那么包含子元素多的元素层级更高。
2. 如果两个元素在同一个层叠上下文中，那么z-index值高的元素层级更高。
3. 如果两个元素不在同一个层叠上下文中，无论z-index值如何，层叠上下文的元素始终在普通元素之上。

  <div class="parent">
    <div class="child child1">Child1</div>
    <div class="child child2">Child2</div>
  </div>
  
  .parent {
    position: relative;
    background: gray;
    z-index: 1;
  }
  
  .child {
    position: absolute;
    width: 50px;
    height: 50px;
  }
  
  .child1 {
    left: 0;
    top: 0;
    background: red;
    z-index: 2;
  }
  
  .child2 {
    left: 25px;
    top: 25px;
    background: blue;
    z-index: 1;
  }

在这个例子中，红色的Child1元素位于蓝色的Child2元素之上，因为它拥有更高的z-index值。同时，由于两个元素都在同一个父元素中，所以它们的层级顺序由z-index值决定。

三、注意事项

使用z-index属性时，需要注意如下细节：

1. z-index属性只对定位元素(position:absolute/fixed)和flex/grid容器中的元素生效。对于普通的文档流元素无效。
2. z-index值可以是负数，这时它们会被放在所有正常z-index值之下。
3. 如果一个元素的z-index值没有被显式地设置，那么它的值会被继承自父元素。
4. z-index值越高的元素越容易被用户点击到。
5. 使用多个层叠上下文来构建复杂的布局时，需要时刻保持层级关系的清晰。

  <div class="parent">
    <div class="child child1">Child1</div>
    <div class="child child2">Child2</div>
  </div>
  
  .parent {
    background: gray;
  }
  
  .child {
    position: absolute;
    width: 50px;
    height: 50px;
  }
  
  .child1 {
    left: 0;
    top: 0;
    background: red;
  }
  
  .child2 {
    left: 25px;
    top: 25px;
    background: blue;
    z-index: -1;
  }

在这个例子中，蓝色的Child2元素的z-index值为负数，因此它会被放在所有正常z-index值之下。这时，即使它在父元素中位置靠上，也不会遮挡住红色的Child1元素。

四、总结

层叠上下文对于Web页面的布局和交互非常重要，可以用来控制元素之间的层级关系以及遮挡关系。熟练的掌握z-index属性的用法和层叠上下文的创建方式，可以帮助我们更加高效地实现复杂的Web页面。