CSS z-index层重叠顺序使用介绍

在使用 CSS 布局时，我们有时会遇到多个元素重叠显示的情况，此时就需要使用 z-index 属性来控制层叠顺序。本文将详细介绍 z-index 属性的使用方法和注意事项。

1. z-index 简介

z-index 属性指定一个元素的层叠级别，数值越大的元素在相同位置上覆盖数值越小的元素。

2. 如何使用 z-index

在 css 中，使用 z-index 属性，代码如下：

selector {
    z-index: value;
}

其中，selector 为需要设置层叠顺序的 HTML 元素，value 为数字类型的属性值，用于表示层叠的优先级，数值越大的元素优先级越高。

3. z-index 属性的注意事项

• z-index 只能用于定位元素（position 属性值为 relative、absolute 或 fixed）。
• 同一父元素的元素，z-index 越大的元素越会向上覆盖。
• 如果一个元素添加了 z-index 属性，但没有对应的定位属性（如 relative、absolute 或 fixed），z-index 将不起作用。

4. z-index 属性的示例说明

示例 1

HTML 代码：

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="box3">Box 3</div>

CSS 代码：

.box1 {
    position: relative;
    z-index: 1;
}
.box2 {
    position: relative;
    z-index: 2;
}
.box3 {
    position: relative;
    z-index: 3;
}

在上述代码中，box1 的 z-index 为 1，box2 的 z-index 为 2，box3 的 z-index 为 3。因此，box3 会覆盖 box2 和 box1。

示例 2

HTML 代码：

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="box3">Box 3</div>

CSS 代码：

.box1 {
    position: relative;
    z-index: 1;
}
.box2 {
    position: relative;
    z-index: 3;
    background-color: red;
}
.box3 {
    position: relative;
    z-index: 2;
}

在上述代码中，box1 的 z-index 为 1，box3 的 z-index 为 2，box2 的 z-index 为 3。因此，box2 会覆盖 box3，但被 box1 覆盖。

5. 总结

本文详细介绍了 CSS 中 z-index 属性的使用方法和注意事项，以及给出了两个示例，希望能帮助读者更好地掌握层叠顺序的控制方法。