css 几张图片设置层级关系

CSS中，我们可以通过设置层级关系来控制元素在页面中的显示顺序。层级关系是通过z-index属性来控制的。z-index属性指定一个元素的堆叠顺序，值越大，层级越高，越靠近视口。

下面是一个示例，有三张图片，我们想要将它们按照从下到上的顺序依次叠放。

div class="container">
      img src="img1.png" class="img1">
      img src="img2.png" class="img2">
      img src="img3.png" class="img3">
    /div>
.container {
      position: relative;
}
.img1 {
      position: absolute;
      z-index: 1;
}
.img2 {
      position: absolute;
      z-index: 2;
}
.img3 {
      position: absolute;
      z-index: 3;
}

在上面的代码中，我们给.container设置了position: relative，这是因为z-index属性只对定位元素（position为absolute、fixed、sticky）生效。

现在，我们可以通过设置不同的z-index值来控制图片的层级关系，这里img1的z-index为1，img2的z-index为2，img3的z-index为3，因此它们会按照从下往上的顺序叠放。

当然，如果我们想要改变它们的位置，可以通过调整它们的top和left值来实现。例如，我们想要让img2放在img1上方20像素的位置：

.img2 {
      position: absolute;
      z-index: 2;
      top: 20px;
      left: 0;
}
    

通过上面这段代码，我们可以将img2相对于.container向下移动20像素，从而达到我们想要的效果。

总之，设置层级关系可以让我们更加灵活地控制页面中元素的显示和位置，学会它将会非常有用。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！