不使用 CSS position:relative 重叠 PNG 图像

Question

我有一堆 PNG 图像，它们将一个接一个地放置。它们中的大多数是矩形，但其中一些图像的一部分粘在图像其余部分的顶部之上。我希望那部分重叠到它上面的图像上。我可以使用 position:relative; bottom:50px;将图像向上移动以重叠其上方的图像，但该图像与其下方的图像之间存在间隙。任何人都可以让这些图像重叠而不在下方留下空隙吗？谢谢。

Answer 1

您可以为此使用 negative margin-top 值。

（我在我的代码片段中的第二个元素中添加了一些 opacity，通过让顶部元素透出一点来使重叠更加明显）

.x {
  width: 400px;
  height: 150px;
  background: yellow;
}
.b {
  background: blue;
  margin-top: -50px;
  opacity: 0.7;
}
.c {
  background: red;
}

<div class="x a"></div>
<div class="x b"></div>
<div class="x c"></div>

不使用 CSS position:relative 重叠 PNG 图像

Overlapping PNG images without using CSS position:relative

html

css

position

image