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

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

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

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

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

你可以使用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图层。

这是我所做的使一个图像漂浮在另一个图像上的一个粗略的观察。

img { 位置:绝对的; 上图:25 px; 左:25 px; ｝ .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">

源

@buti-oxa:不是卖弄学问，但你的代码是无效的。HTML的宽度和高度属性不允许单位;你可能会想到CSS的width:和height:属性。你还应该提供一个content-type (text/css;参见Espo的代码)使用<style>标记。

<style type="text/css"> 
.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; right: 0; } 
</style>

<div class="containerdiv">
    <img border="0" src="http://www.gravatar.com/avatar/" alt="" width="100" height="100">
    <img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="" width="40" height="40">
<div>

离开px;在宽度和高度属性可能会导致渲染引擎停滞。

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

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