z-index 基础
本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 59 课，共 76 课。
在 CSS 中，z-index 属性用于控制已定位元素（position 值不是 static 的元素）的堆叠顺序。当元素重叠时，z-index 决定哪个元素显示在上方，哪个显示在后方。z-index 值较高的元素会叠放在值较低的元素前面。
下面是使用 z-index 属性的基本语法：
selector {
position: relative; /* 或 absolute、fixed、sticky */
z-index: value;
}position: relative;（或absolute、fixed或sticky）：元素必须设置定位，z-index才会生效。
value：表示堆叠顺序的整数值。值较大的元素会叠放在值较小的元素前面。值可以是正数、负数或零。
例如：
.box1 {
position: absolute;
top: 50px;
left: 50px;
z-index: 2;
}
.box2 {
position: absolute;
top: 70px;
left: 70px;
z-index: 1;
}在这个示例中，.box1 和 .box2 都采用绝对定位。由于 .box1 的 z-index 值更高，因此它们重叠时，.box1 会显示在 .box2 前面。
挑战
简单给定一个包含三个重叠分区的 HTML 文档，这些分区（<div>）的类分别是 box1、box2 和 box3。你的任务是使用 z-index 属性控制这些元素的堆叠顺序。按照以下步骤操作：
- 编写一条 CSS 规则，选择类为
box1的<div>元素。将它的position属性设为absolute，将top设为0，将left设为0，并将z-index设为3。 - 编写一条 CSS 规则，选择类为
box2的<div>元素。将它的position属性设为absolute，将top设为20px，将left设为20px，并将z-index设为2。 - 编写一条 CSS 规则，选择类为
box3的<div>元素。将它的position属性设为absolute，将top设为40px，将left设为40px，并将z-index设为1。
观察 z-index 的值如何影响这些方框的堆叠顺序，其中 box1 位于最上层，box3 位于最下层。
亲手试试
<html>
<head>
<title>Z-Index Basics</title>
<style>
.box1 {
position: absolute;
width: 100px;
height: 100px;
background-color: lightblue;
}
.box2 {
position: absolute;
width: 150px;
height: 150px;
background-color: lightgreen;
}
.box3 {
position: absolute;
width: 200px;
height: 200px;
background-color: lightcoral;
}
/* Write CSS rules here */
</style>
</head>
<body>
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="box3">Box 3</div>
</body>
</html>
自我测试这节课包含一个小测验。开始学习即可作答，并记录你的进度。
使用 CSS 添加样式中的所有课
自己练习： Web 在线编辑器