css的z-index属性怎么使用

CSS的z-index属性用于控制元素在页面上的堆叠顺序，它是一个非负整数，数值越大，元素在页面上的垂直位置越靠前，z-index属性可以应用于所有类型的元素，如块级元素、内联元素和表格单元格等，通过调整z-index值，我们可以实现各种层叠效果，如设置一个元素覆盖在另一个元素上、调整弹出框的位置等。

下面详细介绍一下如何使用CSS的z-index属性：

1、设置单个元素的z-index值

要为单个元素设置z-index值，只需在CSS样式表中为该元素添加z-index属性，并设置一个非负整数值。

.box {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
  z-index: 10;
}

在这个例子中，我们为名为.box的元素设置了z-index值为10,使其在页面上显示在其他元素之上。

2、设置多个元素的z-index值

如果需要设置多个元素的z-index值，可以使用逗号分隔的方式为每个元素分别设置z-index值。

.box1, .box2 {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
}
.box1 {
  z-index: 5;
}
.box2 {
  z-index: 10;
}

在这个例子中，我们为名为.box1和.box2的两个元素分别设置了z-index值，使得.box2的z-index值大于.box1,因此.box2会显示在.box1之上。

3、为父元素设置z-index值

如果需要让子元素根据父元素的z-index值进行堆叠，可以将父元素的z-index值设置为负数，这样，具有正z-index值的子元素会显示在具有负z-index值的父元素之上。

.parent {
  position: relative;
  z-index: -1;
}

在这个例子中，我们将名为.parent的父元素的z-index值设置为-1,使得其子元素(如.child)会显示在其上方。

4、使用z-index与position属性结合使用

我们需要将一个元素放在另一个元素之上，但又不希望改变它们的相对位置，这时，我们可以使用z-index属性与position属性结合使用。

.element1 {
  position: relative;
}
.element2 {
  position: absolute;
  top: 0;
  left: 0;
}

在这个例子中，我们将名为.element2的元素设置为绝对定位，并将其放置在名为.element1的相对定位元素之上，由于.element2的父元素(即.element1)具有较高的z-index值，因此.element2会显示在.element1之上。