css中怎样让图片重叠显示

在网页设计中，图片是不可或缺的元素之一。有时候我们需要将图片重叠显示，以达到更好的视觉效果。那么，在CSS中，我们该怎样实现图片重叠显示呢？
在CSS中，可以使用`position`属性来控制元素的位置。利用`position`属性和`z-index`属性，我们可以轻松实现图片的重叠效果。
首先，我们需要给图片设置`position`属性。`position`属性有以下几个值：
- static：默认值，元素在正常文档流中，并且不会受到`top`、`bottom`、`left`、`right`的影响。
- relative：元素在正常文档流中，并且可以通过`top`、`bottom`、`left`、`right`属性相对于其原始位置进行移动。
- absolute：元素可从文档流中取出，并相对于最近的非`static`定位祖先元素进行绝对定位。
- fixed：元素相对于浏览器窗口进行定位，不随页面滚动而移动。
一般来说，我们使用`relative`或`absolute`属性来定位元素。接下来，给图片设置`position:relative`属性，这样图片就可以随意移动了。
然后，我们要使用`z-index`属性来控制图片的堆叠顺序。`z-index`属性用于控制元素的堆叠顺序，只有设置了`position`属性的元素才能使用`z-index`属性。`z-index`属性的取值范围是整数，值越大，元素在堆叠顺序上就越靠上。
例如，我们有两张图片，要让它们重叠显示，我们可以这样写：

css
<style>
    .img {
        position: relative;
        width: 200px;
        height: 150px;
    }

    .img1 {
        z-index: 2;
    }

    .img2 {
        z-index: 1;
    }
</style>

<p class="img">
    <img src="image1.jpg" alt="image1" class="img1">
    <img src="image2.jpg" alt="image2" class="img2">
</p> 

在上面的代码中，我们给图片容器上添加了`position:relative`属性，然后为两张图片分别设置了`z-index`属性，值分别为2和1。这样第一张图片就在第二张图片的上面了。
总结一下，要实现图片重叠显示，需要以下步骤：
1. 给图片容器设置`position:relative`属性，使其成为定位元素。
2. 使用`z-index`属性控制图片堆叠顺序，值越大的图片在堆叠顺序上越靠上。
通过以上方法，我们就可以轻松实现图片重叠显示了。