css 三张图片叠加 |css 的position

.container {
position: relative;
width: 300px;
height: 300px;
}
.image {
position: absolute;
top: 0;
left: 0;
}
.image1 {
z-index: 1;
}
.image2 {
z-index: 2;
}
.image3 {
z-index: 3;
}

在上面的代码中，大家首先创建了一个容器，将其定位为相对定位，并指定宽度和高度。接下来，大家定义了三个类名为image1、image2和image3的元素，分别代表了三张需要叠加的图片。这些元素都设置为绝对定位，并设置了它们在容器中的位置。然后，使用z-index属性来控制它们的层叠顺序，值越大的元素将优先展示。

接下来，让大家看一下HTML代码：

<div class="container"><img src="image1.png" class="image image1"><img src="image2.png" class="image image2"><img src="image3.png" class="image image3"></div>

在上面的代码中，大家创建了一个div元素，并添加了三个img元素，它们的类名分别与CSS代码中的类名相同。这样就可以通过CSS代码来控制这些元素的显示顺序，从而实现三张图片的叠加效果。

总之，使用CSS来实现三张图片叠加效果可以让大家更加灵活地控制展示效果，并且能够在一定程度上提高页面的美观度。