好的,过了一段时间,这就是我的目标:
.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://placehold.it/50" />
<img class="image2" src="https://placehold.it/100" />
</div>
作为最简单的解决方案。那是:
创建一个放置在页面流中的相对div;首先将基本图像作为相对图像放置,以便div知道应该有多大;将叠加层相对于第一张图片的左上角作为绝对值放置。诀窍是使亲戚和绝对人正确。