在CSS中，当多个元素重叠时，想要让某个元素显示在最上层，我们可以使用`z-index`属性。`z-index`属性用来控制元素在垂直于显示屏的Z轴上的堆叠顺序。值越大，元素在堆叠顺序中越靠上。
堆叠上下文（Stacking Context）
在深入`z-index`之前，理解堆叠上下文的概念是很重要的。堆叠上下文是一个三维的概念，它规定了如何在Z轴上对元素进行排序。在HTML中，并不是所有的元素都处于同一个堆叠上下文中。某些特定的元素会创建一个新的堆叠上下文。
以下元素会创建新的堆叠上下文：
- 根元素（HTML）
- `position`值为`absolute`或`relative`且`z-index`值不为`auto`的元素
- `position`值为`fixed`或`sticky`的元素
- `flex`项（父元素`display: flex`或`display: inline-flex`）
- `grid`项（父元素`display: grid`或`display: inline-grid`）
- `opacity`小于1的元素
- `transform`值不为`none`的元素
- `mix-blend-mode`值不为`normal`的元素
- `filter`值不为`none`的元素
- `perspective`值不为`none`的元素
- `isolation`值为`isolate`的元素
- `will-change`指定的属性值为上面列出的任意一个
- `-webkit-overflow-scrolling`值为`touch`的元素
使用`z-index`
如果想要一个元素覆盖在其他元素之上，首先确保该元素在堆叠上下文中的位置。然后按照以下步骤操作：
1. 将元素的`position`属性设置为`relative`、`absolute`、`fixed`或`sticky`，这一步是必须的，因为`z-index`仅作用于非静态定位的元素。
2. 使用`z-index`属性并赋予一个较大的值。其他元素的`z-index`值如果比这个元素小，那么将会位于它的下面。
举个例子：
/* 让这个div显示在最上面 */
.top-layer {
position: relative; /* 或absolute, fixed, sticky */
z-index: 10; /* 这里指定了一个较大的z-index值 */
}
注意事项
- `z-index`只对定位元素有效（非静态定位）。
- 如果两个元素具有相同的`z-index`值，则按照它们在HTML中的顺序进行堆叠，后出现的元素将位于先出现的元素之上。
- `z-index`的值可以是正整数、负整数或0，但不可以是负数和小数。
- 父元素的`z-index`值不会影响子元素，除非父元素创建了一个新的堆叠上下文。
使用`z-index`时，要注意层次结构的合理性，过大的层次结构（大量的`z-index`值）可能会导致难以管理，应当尽量保持简洁明了。