CSS 如何将一张图片放在另一张图片上方

在本文中，我们将介绍如何使用CSS将一张图片放在另一张图片的上方。无论是用于设计网页还是创建图片叠加效果，掌握这个技巧都能为我们的设计提供更多样化的可能性。

阅读更多：CSS 教程

1. 使用绝对定位实现图片叠加效果

绝对定位是一种常见的实现图片叠加效果的方法。通过设置父元素的position: relative，再将子元素设置为position: absolute并利用top、left等属性进行定位，可以将子元素放在父元素的上方。

.container {
  position: relative;
  width: 300px;
  height: 200px;
}

.image1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.image2 {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 2;
}

在上述示例中，.container是父元素的class，它的宽度和高度分别设置为300px和200px。.image1和.image2是两个子元素的class，.image2的z-index属性设置为2，使它位于.image1的上方。

2. 使用负边距实现图片叠加效果

除了绝对定位，我们还可以使用负边距来实现图片叠加效果。这种方法比较简洁，只需要在叠加的图片上设置一个负的margin值即可。

.image1 {
  margin: 0;
  padding: 0;
  z-index: 1;
}

.image2 {
  margin-top: -200px;
  z-index: 2;
}

在上述示例中，.image1和.image2的z-index属性分别设置为1和2，.image2的margin-top属性设置为-200px，让它上移200px，覆盖在.image1之上。

3. 使用CSS伪元素实现图片叠加效果

除了常见的方法，我们还可以使用CSS伪元素::before和::after来实现图片叠加效果。通过给父元素添加伪元素，并设置背景图片和定位属性，就可以将伪元素视为一张图片放在原图上方。

.container:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 200px;
  background: url(image2.jpg) no-repeat center center;
  z-index: 2;
}

.container img {
  position: relative;
  z-index: 1;
}