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

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

应该在样式中包含px单元。

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

除此之外，答案还不错。谢谢。

下面的代码可能会给你一些启发:

<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

我怀疑埃斯波的解决方案可能是不方便的，因为它需要你完全定位两个图像。您可能希望第一个对象在流中定位。

通常，有一种很自然的方法可以做到这一点，那就是CSS。你把position: relative放在container元素上，然后在里面绝对放置子元素。不幸的是，您不能将一个图像放到另一个图像中。这就是为什么我需要container div。请注意，我将其设置为float，以使其自动适应其内容。使其显示为:inline-block理论上也可以，但浏览器的支持很差。

编辑:为了更好地说明我的观点，我从图片中删除了尺寸属性。如果您希望容器图像具有默认大小，并且事先不知道大小，则不能使用背景技巧。如果你这样做了，这是一个更好的方法。

这可能有点晚了，但你可以这样做:

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;
    }
  }
}

Here is a solution that worked for me. Assuming all the images to be stacked are inside a div container, all you need to do is to set the display property of the div to flex. Don't set any position for the first image but for every other image, set the position property to absolute. Finally, use z-index to control the layers. You can set the first image's z-index to 1, the second image's z-index to 2, and so on (In my own case, I set the z-index of every other image apart from the first image to 2). If you want to center the images, you can set the justify-content property of the div to center to align the images horizontally to the center and adjust the top property to align the images vertically to the center. The values you use for the justify-content and top properties depend on the size of your images and whether the sizes are responsive on different devices or not. Here's my example:

img { 边框:2px纯红色; ｝ .img1n2 { 显示:flex; justify-content:中心; ｝ .img1 { z - index: 1; ｝ .img2 { 位置:绝对的; z - index: 2; 上图: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来满足您的特定需求。编码快乐!

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

< span style=" font - family:宋体;Grid-template-columns: [first-col] 100%;Grid-template-rows:[第一行]300px"> <img src="https://fakeimg.pl/300/" style=" font - family:宋体;grid-row-start:板凳”> <img src="https://fakeimg.pl/300/" style=" font - family:宋体;grid-row-start:板凳”> < img src = " https://fakeimg.pl/300/ " > < / div >

你可以在这里找到一个关于CSS-Grid的很好的解释。

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

另一种方法是使用css图层。有大量的资源可以帮助你做到这一点，只要搜索css图层。