什么是 Z 索引？
Z 索引是 CSS 中一种用于控制重叠元素上下顺序的机制。默认情况下，元素按照它们在 HTML 中出现的顺序进行堆叠。这意味着最后一个元素会被放置在堆栈的顶部，而第一个元素会被放置在堆栈的底部。
为了更好地控制元素的堆叠顺序，我们可以使用 z-index 属性。它允许我们控制元素的层叠顺序，使得更高 z-index 值的元素位于前面（上层） ，而更低 z-index 值的元素位于后面（下层）。
要注意的是，z-index 只能在处于定位状态（即设置了 position 属性）的元素上生效。
/* 给一个元素设置 z-index 值 */
.element {
position: relative; /* 先确保这个元素是相对定位或绝对定位 */
z-index: 1;
}
如何使用 Z 索引控制元素的堆叠顺序？
使用 CSS 中的 z-index 属性可以控制元素的堆叠顺序，使用z-index 来控制元素的堆叠顺序，需要遵循以下规则：
z-index 只对定位元素有效。 要为元素设置 z-index 属性，该元素需要满足定位条件。
z-index 值可以为负数。 与其他的 CSS 属性不同，z-index 属性接受负数值。
z-index 值越大，越靠前（上层）。 与堆叠顺序相反，z-index 值越大的元素越靠前，越先被渲染出来。
以下是一个例子，演示如何使用 z-index 属性来控制元素的堆叠顺序：
/* 一个半透明的矩形 */
.lower {
position: absolute;
top: 20px;
left: 20px;
width: 200px;
height: 200px;
background-color: rgba(0, 0, 255, 0.5);
}
/* 一个红色的圆形，放在矩形上面 */
.upper {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
z-index: 1; /* 比 lower 的 z-index 值大，所以 upper 在上层 */
}
如何处理多个重叠的元素？
1. 使用 z-index 控制堆叠顺序
当两个元素发生重叠时，我们可以通过设置 z-index 属性来控制它们的层叠顺序。例如，我们可以为后面的元素设置一个更大的 z-index 值来让它出现在前面的元素上层。要注意的是，多个元素的 z-index 值不能相同，否则浏览器将会按照它们在 HTML 中出现的顺序进行层叠。
.element {
position: relative;
z-index: 1; /* 堆叠顺序最靠前的元素 */
}
.element2 {
position: relative;
z-index: 2; /* 堆叠顺序比 element 前面，所以位于 element 上层 */
}
2. 改变元素的结构
另一种处理重叠元素的方法是通过改变元素的结构。我们可以将一些元素提升到它们的父元素或同级元素的上面，或者通过调整元素的位置来实现。
2.1 使用父元素包裹要放置在上层的元素
可以将要放置在上层的元素单独放在一个容器中，并将该容器作为父元素，这样它的 z-index 值就高于其他兄弟元素。这样可以使得父元素（上层元素）与其他元素隔开，从而不会发生层叠。例如：
/* HTML 结构 */
<div class="container">
<div class="top"></div>
<div class="bottom"></div>
</div>
/* CSS 样式 */
.container { position: relative; }
.top {
position: absolute;
top: -10px;
left: 0;
width: 100%;
height: 50px;
background-color: rgba(255, 0, 0, 0.5);
z-index: 1; /* top 元素 z-index 值更高 */
}
.bottom {
position: absolute;
top: 20px;
left: 0;
width: 100%;
height: 50px;
background-color: rgba(0, 0, 255, 0.5);
}
2.2 使用 transform 属性调整元素的位置
我们可以通过使用 transform 属性来调整元素的位置。例如，要将下方的蓝色矩形元素放置在上层的红色圆形元素之上，可以使用以下 CSS 样式：
.circle {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgba(255, 0, 0, 0.5);
}
.rectangle {
position: absolute;
top: 20px;
left: 20px;
width: 200px;
height: 200px;
background-color: rgba(0, 0, 255, 0.5);
transform: translate(0, -50%); /* 将矩形的中心向上移动 50% */
}
避免 z-index 滥用
尽量避免滥用 z-index 属性，因为它可能会导致一些难以调试的问题。如果在复杂的布局中过度使用 z-index，会使得元素的层叠顺序变得复杂，有时会出现意想不到的结果。
此外，过度使用 z-index 也会影响性能。当浏览器在绘制页面时，会计算每个元素的布局和位置，包括堆叠顺序。如果存在大量的 z-index 值，浏览器需要花费额外的计算时间来确定每个元素的层叠顺序。
因此，我们应该尽量使用其他方法来控制布局和层叠顺序，比如合理的 HTML 结构、更为简单的 CSS 样式等。
小结
使用 CSS 与 Z 索引重叠元素是在布局时，常常遇到的问题。学会使用 z-index 属性来控制元素的层叠顺序，可以让我们更好地掌握布局的细节。除了使用 z-index 外，我们还可以通过改变元素结构、使用 transform 属性等其他方法来调整元素的位置关系。但是，我们需要避免滥用 z-index 属性，尽量使用其他方法来控制布局和层叠顺序。