html - 设置为绝对的图像不对齐 = 不在父 div 内

Question

我有一个小问题，我希望你们能帮忙。我在我的正面图像上创建了一个空的白框。为此，我必须将图像更改为绝对图像。在此之后，图像现在不对齐。为了更容易理解，我想给你看两张图片，这样你就可以看出问题所在。

设置为相对时的图像:

它是顶部的水图像。在这里你可以看到它与下面的水色框完美对齐(左侧和右侧)。

设置为绝对时的图像:

不知何故，当我将图像设置为绝对图像时，它在右侧变大了。我读过一些较早的帖子，应该将 parant 设置为 relative..我的意思是我已经这样做了。

代码:

<div class="row">
<div class="col-sm-12 contentpage">

        <img id="frontimage" src="~/images/index.jpg" />


    <div class="col-lg-4">
        <div class="bookingbox">

        </div>
    </div>


</div>
</div>

CSS:

#frontimage{
z-index: 1;
position: absolute;
}

.contentpage {
height: 650px;
background-color: white;
position: absolute;
}

.bookingbox {
background-color: green;
position: absolute;
height: 450px;
width: 300px;
z-index: 2;
position: absolute;
top: 30px;
left: 30px;    
}

img {
max-width: 100%;
}

现在可以了..看看图片:D

Answer 1

当然是错位了!

当您将图像设置为绝对图像时，它会打断页面的流动，基本上会创建一个新的“层”。您可以说它“绝对”脱离了页面流。

当您将图像设置为绝对图像时，要正确定位它，请将图像的父级设置为相对的，然后根据父级的原点定位和调整图像的大小。

确保添加另一个 div 以使其适合它! 眨眼