div z-index设置应用

z-index属性用于控制HTML元素的堆叠顺序（层叠顺序）。它可以指定元素在垂直堆叠顺序中的位置，具有更高z-index值的元素将覆盖具有较低值的元素。

z-index属性的取值可以是整数、负数或auto。较高的z-index值表示元素在堆叠顺序中较高的位置。如果两个元素具有相同的z-index值，则它们将按照它们在HTML文档中的顺序进行堆叠。

以下是一些关于z-index属性的注意事项：

z-index属性仅适用于具有定位（position）属性的元素，例如position: relative;、position: absolute;或position: fixed;。

z-index属性的默认值为auto，表示元素的堆叠顺序由其在HTML文档中的顺序决定。

具有较高z-index值的元素将覆盖具有较低值的元素，即使后者在DOM结构上位于前者之上。

对于具有相同父级的元素，子元素的z-index值较高的元素将覆盖具有较低值的元素。

下面是一个示例，展示了如何使用z-index属性：

HTML代码：

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

CSS代码:

.box {
position: relative;
width: 200px;
height: 200px;
border: 1px solid black;
background-color: white;
}
.box1 {
z-index: 2;
}
.box2 {
z-index: 1;
}
.box3 {
z-index: 3;
}

在上面的示例中，box3元素具有最高的z-index值，因此它将位于最上面，覆盖其他两个元素。box1元素具有较高的z-index值，所以它位于box2元素之上。

请记住，z-index只在具有定位属性的元素之间才有效，并且它的效果限于同一堆叠上下文。如果元素位于不同的堆叠上下文中（例如父元素具有不同的z-index值），则它们之间的堆叠顺序是相互独立的。