image overlaping with main div border-CodePudding

image in a div should fit div and i can manage that. But where i struggle is to make image to be over the border AND still to be contained within the main 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>

CodePudding user response：

For position: absolute; you also need to specify your positioning with top/bottom and/or 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>