CSS 元素顶层

在 CSS 中，每个元素都有其自己的层叠上下文。在这个上下文中，每个元素都会被分配一个层数，这个层数会影响元素的显示顺序。

1. 层叠起点

层叠起点（stacking context）是层叠上下文中最重要的概念。它用来定义一个元素在同一层叠上下文中的层叠顺序和优先级。当一个元素建立了一个新的层叠上下文，它就会成为一个层叠起点。

层叠起点的优先级取决于元素的类型、位置和属性。为了方便，我们可以把层叠起点的优先级简单地分为以下几个级别：

1. z-index 值
2. 非 static 定位元素，及其子元素
3. 其他元素

例如：

.element-1 {
  z-index: 1;
  position: absolute;
}

.element-2 {
  z-index: 2;
  position: relative;
}

.element-3 {
  z-index: 3;
}

在上面的代码中，.element-1 的层叠起点优先级最低，.element-3 的层叠起点优先级最高。

2. 层叠顺序

当多个元素同时出现在一个层叠上下文中时，它们的层叠顺序决定了它们显示的顺序。

在一个层叠上下文中，元素的层叠顺序是由以下属性决定的：

1. z-index 值越高的元素越靠上面
2. 定位元素越靠上面
3. 其他元素按照它们在HTML中出现的次序来显示，先出现的先显示

例如：

.element-1 {
  z-index: 1;
  position: absolute;
}

.element-2 {
  z-index: 2;
  position: relative;
}

.element-3 {
  z-index: 3;
}

在上面的代码中，.element-2 的位置在 .element-1 之上，因为它的 z-index 值更高。.element-3 的位置在 .element-2 之上，因为它的 z-index 值更高。

3. 层叠上下文的创建

在 CSS 中，以下情况会创建一个新的层叠上下文：

1. html 根元素
2. position 值为 absolute 或 relative，并同时设置了 z-index 属性的元素
3. position: fixed 的元素
4. position: sticky 的元素
5. opacity 值小于 1 的元素
6. transform 属性不为 none 的元素
7. mix-blend-mode 不是 normal 的元素
8. isolation 属性设置为 isolate 的元素
9. filter 属性不为 none 的元素
10. will-change 值设定的元素

例如：

<div class="parent">
  <div class="child-1"></div>
  <div class="child-2"></div>
</div>

.parent {
  position: relative;
  z-index: 1;
}

.child-1 {
  position: absolute;
  z-index: 2;
}

.child-2 {
  position: absolute;
  z-index: 3;
  opacity: 0.5;
}

在上面的代码中，.parent 元素创建了一个新的层叠上下文。.child-1 和 .child-2 是 .parent 的子元素，它们的层叠顺序受到 .parent 创建的层叠上下文的影响。.child-2 具有半透明效果，也会创建一个层叠上下文，但其优先级低于 .parent。