首先，让大家来了解一下什么是
标签的覆盖。当大家使用定位属性如position、top、left等来控制
标签的位置时，就可能出现覆盖。当两个
标签的定位和大小相同，并且在同一位置时，后面的
标签会覆盖前面的
标签。
.box1 {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: red;
}
.box2 {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: green;
}在上面的代码中，大家定义了两个
标签，它们的位置和大小相同，其中.box2在.box1的上面。当大家在HTML中依次添加这两个
标签时，会发现.green的背景色完全覆盖了.red。
要避免
标签的覆盖，大家可以使用z-index属性。该属性定义了元素的堆叠顺序，数值越大的元素越靠上。大家可以将.z-index设置为正整数，避免它们在布局中被覆盖。
.box1 {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: red;
z-index: 1;
}
.box2 {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: green;
z-index: 2;
}在上面的代码中，大家通过给.box2设置z-index的值大于.box1来避免覆盖，使得.green的背景色位于.red之上。
总之，通过设置z-index属性可以避免
标签的覆盖问题，让布局更加合理。