图片与主div边框重叠

Question

图像在一个div应该适合div，我可以管理。但是，我挣扎的地方是使图像超越边界，仍然包含在主div中。

.box {
border: 2px solid #000;
border-radius: 5px;
font-family: sans-serif;
max-width: 300px;
position: relative;

}

.image {
position: absolute;  
max-width:100%;
max-height:100%;
}

<div class="box">
<div class="image">
<img class="box__image" src="#" alt="#">
<div>

<div class="random">
<p class="box__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu ipsum quis lacus sagittis vehicula eget sed diam. Nam quis sapien sem. Phasellus vehicula blandit nunc vel cursus. Nullam felis nisl, molestie ut ipsum sit amet, vulputate tempus nibh. </p>
</div>
</div>

Answer 1

对于position: absolute;，您还需要指定您与top/bottom和/或left/right的定位。

.box {
border: 2px solid #000;
border-radius: 5px;
font-family: sans-serif;
max-width: 300px;
position: relative;

}
.image {
position: absolute;  
max-width:100%;
max-height:100%;
top: -10px;
}

<div class="box">
<div class="image">
<img class="box__image" src="#" alt="#">
<div>

<div class="random">
<p class="box__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu ipsum quis lacus sagittis vehicula eget sed diam. Nam quis sapien sem. Phasellus vehicula blandit nunc vel cursus. Nullam felis nisl, molestie ut ipsum sit amet, vulputate tempus nibh. </p>
</div>
</div>