在不使用 CSS 位置的情况下重叠 PNG 图像：相对

【问题标题】：Overlapping PNG images without using CSS position:relative在不使用 CSS 位置的情况下重叠 PNG 图像：相对
【发布时间】：2021-03-19 22:26:37
【问题描述】：

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

【问题讨论】：

标签： html css image position

【解决方案1】：

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

（我在 sn-p 中的第二个元素中添加了一些 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>

【讨论】：