@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;在宽度和高度属性可能会导致渲染引擎停滞。

你完全可以相对于它们的父元素来定位伪元素。

这为每个元素提供了两个额外的层-因此将一个图像放置在另一个图像之上变得很容易-具有最小的语义标记(没有空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;
}

这里是一个现场演示

内联样式只是为了清晰起见。使用真正的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>

创建一个相对的div，放在页面的流中;将基本图像放在相对位置，这样div就知道它应该有多大;相对于第一张图片的左上方，将重叠图层放置在绝对位置。诀窍在于正确使用亲戚和绝对。

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

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来满足您的特定需求。编码快乐!