Html 如何使两个图像相互重叠

所以我试着让两个图像互相重叠。1必须始终位于位置2。第三个问题一直是现在（我只是为了以防万一才加上它），所以我知道有一些答案，如何做得不好，我不知道如何应用它们

HTML
<div class="container">
        <div class="HOMElinks">
            <div class="HOMElinks-big">
                <img src="img/link-big.jpg" width="450" height="325">
            </div>
            <div class="HOMElinks-small">
                <img src="img/link_basic.jpg" width="250" height="150">
            </div>

            <div class="HOMElinks-small">
                <img src="img/link_basic.jpg" width="250" height="150">
            </div>


        </div>
    </div>
CSS
.HOMElinks {
    margin-top: 2.5%;
}

.HOMElinks-big {
    float: left;
}

.HOMElinks-small {
    float: right;
    margin-bottom: 2.5%;
}

HTML
CSS
.家庭链接{
利润率最高：2.5%；
}
.家庭链接大{
浮动：左；
}
.HOMElinks小型{
浮动：对；
利润底部：2.5%；
}

您的两个

都是浮动的。HOMElinks small

。默认情况下，如果他们有足够的空间，他们会排在一起。解决这个问题的一个简单方法是将它们包装在一个容器中，然后将其漂浮起来

上述方法的一个不幸的副作用是，它使您的

利润底部：2.5%

与原始设计相比有不同的结果。这是因为上下边距（以及填充到的边距）使用的是元素的宽度，而不是高度。一种解决方法是使用视口单位。为了与屏幕的宽度保持一致，我使用了2.5vw，其中vw表示视口宽度。这相当于窗口宽度的2.5%

在这里，我使用

.HOMElinks small group

作为一个容器，vw作为边距，并将图像的大小更改为百分比大小，以便您更容易看到效果

.HOMElinks{
利润率最高：2.5vw；
}
.家庭链接大{
宽度：45%；
浮动：左；
}
.HOMElinks小组{
宽度：25%；
浮动：对；
}
.HOMElinks小型{
利润底部：2.5vw；
}
img{
宽度：100%；
}