css两个图片不重叠

CSS是前端开发中最重要的组成部分之一，通过它可以实现网页的样式美化以及布局。在实际开发过程中，我们经常会遇到一个问题：如何让两个图片不重叠？在这篇文章中，我们将详细介绍如何通过CSS实现这个目标。

//HTML代码
<div class="container">
  <img src="image1.jpg" alt="图片1">
  <img src="image2.jpg" alt="图片2">
</div> 

首先，我们需要在HTML代码中创建一个包含两个图片的容器。接着，我们需要添加以下CSS代码：

//CSS代码
.container {
  position: relative;
}

.container img {
  position: absolute;
  top: 0;
  left: 0;
} 

通过设置容器的position属性为relative，我们可以将其中的子元素的position属性设置为absolute，从而使这些子元素相对于其容器定位。由于设置了子元素的position属性为absolute，使它们可以通过top和left属性来设置它们的位置。

总而言之，通过这样的方式，我们可以轻松地实现两个图片不重叠的效果。除此之外，当然还有很多其他的方法来达到同样的效果，但是我们认为这种方法相对而言更加简单和容易理解。