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

<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理论上也可以，但浏览器的支持很差。

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

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

这里是一个现场演示

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

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">

源

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

<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理论上也可以，但浏览器的支持很差。

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

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