如何在HTML中将一张图片放置在另一张图片上方？

Question

我是一名Rails编程的初学者，尝试在页面上展示许多图片。有些图像需要放置在另一些图像之上。为了简单起见，假设我想要一个蓝色正方形，在蓝色正方形的右上角放置一个红色正方形（但不要贴在角落里）。由于性能问题，我试图避免使用合成技术（如ImageMagick等）。

我只想相对定位重叠的图像。

更难的例子是，在较大的图像中放置一个里程表。对于六个数字，我需要合成一百万个不同的图像，或者在运行时完成所有操作，只需要将六个图像放置在另一个图像上面即可。

- rrichter

---

你可以使用精灵来制作一个图像的里程表。 - Jason

Answer 1

好的，经过一段时间的思考，这是我得出的结果：

.parent {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
  border: 1px red solid;
}
.image2 {
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px green solid;
}

<div class="parent">
  <img class="image1" src="https://via.placeholder.com/50" />
  <img class="image2" src="https://via.placeholder.com/100" />
</div>

最简单的解决方案是：

创建一个相对定位的 div，放置在页面流中；首先以相对定位方式放置基础图像，以便 div 知道其应该有多大；将覆盖层绝对定位相对于第一张图片的左上角。关键是要正确使用相对和绝对定位。

- rrichter

---

这是一个优雅的解决方案。如果"a"的ID为a，而"b"的ID为b，那么通过某些计算设置x和y后，这段JavaScript代码可以用于改变b的位置吗？ - DDPWNAGE

左边距0非常重要！如果忘记了，在Safari中它将无法工作。我花了一段时间才明白这个问题。 - maracuja-juice

运行代码片段时，一个图像没有显示在另一个图像的顶部。 - kojow7

@Me_developer 你不会这样做。你应该使用自动边距。https://www.w3schools.com/howto/howto_css_image_center.asp - Craigo

@Craigo 谢谢，我会尝试。 - Vibhav Chaddha

Answer 2

这是我用来将一张图片浮在另一张图片上方的基本步骤。

img {
  position: absolute;
  top: 25px;
  left: 25px;
}
.imgA1 {
  z-index: 1;
}
.imgB1 {
  z-index: 3;
}

<img class="imgA1" src="https://via.placeholder.com/200/333333">
<img class="imgB1" src="https://via.placeholder.com/100">

来源

- Espo

---

如果这些图像在容器内呢？绝对定位会不会使它到整个网页的左上角？ - Embedded_Mugs

这正是让我来到这个页面的确切问题。 - Alexander

Answer 3

这里是可能会给您启发的代码:

<style>
.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; right: 0; } 
</style>

<div class="containerdiv">
    <img border="0" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt=""">
    <img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="">
<div>

JSFiddle

我怀疑 Espo的解决方案 可能会不太方便，因为它需要你对两个图像进行绝对定位。你可能希望第一个图像自行定位。

通常，使用 CSS 有一种自然的方法来实现这个目标。你在容器元素上放置 position: relative ，然后绝对定位子元素在其内部。不幸的是，你不能将一个图像放到另一个图像中。这就是我需要一个容器 div 的原因。请注意，我将其设置为 float 以使其自适应其内容。理论上，将其设置为 display: inline-block 也应该可以工作，但浏览器的支持不太好。

编辑：我从图像中删除了 size 属性，以更好地说明我的观点。如果你想让容器图像具有其默认大小，并且你不知道大小，那么你无法使用背景技巧。如果你这样做，这是更好的方法。

- buti-oxa

---

这对我来说是最好的解决方案，因为不需要指定图像的宽度和高度，这将导致更高的可重用性。 - Iman Mohamadi

Answer 4

我注意到可能会导致错误的一个问题是，在rrichter的答案中，下面的代码:

<img src="b.jpg" style="position: absolute; top: 30; left: 70;"/>

应该在样式中包含 px 单位，例如：

<img src="b.jpg" style="position: absolute; top: 30px; left: 70px;"/>

除此之外，答案很好用。谢谢。

- Wez

Answer 5

可能有点晚了，但您可以这样做：

HTML

<!-- html -->
<div class="images-wrapper">
  <img src="images/1" alt="image 1" />
  <img src="images/2" alt="image 2" />
  <img src="images/3" alt="image 3" />
  <img src="images/4" alt="image 4" />
</div>

SASS

// In _extra.scss
$maxImagesNumber: 5;

.images-wrapper {
  img {
    position: absolute;
    padding: 5px;
    border: solid black 1px;
  }

  @for $i from $maxImagesNumber through 1 {
    :nth-child(#{ $i }) {
      z-index: #{ $maxImagesNumber - ($i - 1) };
      left: #{ ($i - 1) * 30 }px;
    }
  }
}

- Elkin Angulo

Answer 6

您可以绝对定位伪元素相对于其父元素。

这为每个元素提供了两个额外的图层 - 因此将一张图片放在另一张图片上变得容易 - 并且使用最少的语义标记（没有空的div等）。

标记：

<div class="overlap"></div>

CSS：

.overlap
{
    width: 100px;
    height: 100px;
    position: relative;
    background-color: blue;
}
.overlap:after
{
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 5px;
    left: 5px;
    background-color: red;
}

Here's a LIVE DEMO

- Danield

Answer 7

这里只是为了清晰而使用内联样式。请使用真正的CSS样式表。

<!-- First, your background image is a DIV with a background 
     image style applied, not a IMG tag. -->
<div style="background-image:url(YourBackgroundImage);">
    <!-- Second, create a placeholder div to assist in positioning 
         the other images. This is relative to the background div. -->
    <div style="position: relative; left: 0; top: 0;">
        <!-- Now you can place your IMG tags, and position them relative 
             to the container we just made -->   
        <img src="YourForegroundImage" style="position: relative; top: 0; left: 0;"/>
    </div>
</div>

- Jonathan Holland

Answer 8

简单的方法是使用background-image，然后在该元素中放置<img>。

另一种方法是使用css层。有很多资源可帮助你完成这个任务，只需搜索css layers即可。

- Chris Bartow

Answer 9

您可以使用CSS-Grid，这是一个非常方便的解决方案，如果您想要堆叠、重叠内容。首先需要定义网格，然后在网格内告诉img标签在网格中的位置。如果您将它们定义为位于网格的相同起点，则它们将重叠。在下面的示例中，两个图像被重叠在一起，其中一个在它们下面。

<div style="display: grid; grid-template-columns: [first-col] 100%; grid-template-rows: [first-row] 300px">
  <img src="https://fakeimg.pl/300/" style="grid-column-start: first-col; grid-row-start: first-row">
  <img src="https://fakeimg.pl/300/" style="grid-column-start: first-col; grid-row-start: first-row">
  <img src="https://fakeimg.pl/300/">
</div>

您可以在这里找到关于CSS-Grid的非常好的解释。

- Fzum

Answer 10

以下是我的解决方案。假设所有需要堆叠的图片都在一个div容器内，你只需将该div的display属性设置为flex。对于第一张图片不需要设置任何位置，但是对于每一张其他的图片，都要将position属性设置为absolute。最后，使用z-index来控制图层。你可以将第一张图片的z-index设置为1，第二张图片的z-index设置为2，以此类推(在我的情况下，我将除了第一张图片以外的所有其他图片的z-index都设置为2)。如果你想将图片居中显示，可以将该div的justify-content属性设置为center，将top属性调整为垂直居中。你所使用的justify-content和top属性的值取决于你的图片尺寸大小和是否响应不同设备。

以下是示例：

img {
  border: 2px solid red;
}

.img1n2 {
  display: flex; 
  justify-content:center;
}

.img1 {
  z-index: 1;
}

.img2 {
  position: absolute; 
  z-index: 2;
  top: 52.5%;
}

<div class="img1n2">
  <img class="img1" src="https://fakeimg.pl/400/">
  <img class="img2" src="https://fakeimg.pl/300/" width="100">
  <img class="img2" src="https://fakeimg.pl/200/" width="50">
  <img class="img2" src="https://fakeimg.pl/50/" width="30">
</div>

你可以使用这种方法堆叠一千或一百万张图像。你可以根据自己的需要调整CSS样式。愉快编码！

- John Chidi