Position half image on top of a div - html

Question

I'm trying to create this.
Unfortunately, I'm having trouble putting the image on top of the div like this.
How can I achieve this (CSS or JS)?
My current HTML:
<div className="account-container">
<img src="" alt="Avatar" id="userAvatar"/>
<div className="accountStats">
...Other Stuff
</div>
</div>
My current CSS:
#userAvatar{
border-radius: 50%;
height: 312px;
width: 312px;
object-fit: cover;
object-position: center;
}
.accountStats {
width: 760px;
height:980px;
background: #E0E0E0;
box-shadow: 9px 9px 10px rgba(0, 0, 0, 0.25);
border-radius: 18px;
}
.account-container {
top: 30%;
transform:translate(0, 30%);
}

Answer 1

You can give a minus value for the margin-bottom so that the image drops to the bottom. Set the margin-bottom value to half of the image's height (in this case 156px) so that only half of the image lies above the div. Check this out:
#userAvatar{
margin-bottom:-156px; /* 156px is half of #userAvatar's height */
margin-left:calc(380px - 156px); /* half of .accountStats's width - half of #userAvatar's height */
border-radius: 50%;
height: 312px;
width: 312px;
object-fit: cover;
object-position: center;
}
.accountStats {
text-align:center; /* additional */
padding-top:156px; /* half of #userAvatar's height */
width: 760px;
height:980px;
background: #E0E0E0;
box-shadow: 9px 9px 10px rgba(0, 0, 0, 0.25);
border-radius: 18px;
}
.account-container {
top: 30%;
transform:translate(0, 30%);
}
<div className="account-container">
<img src="https://w7.pngwing.com/pngs/7/618/png-transparent-man-illustration-avatar-icon-fashion-men-avatar-face-fashion-girl-heroes-thumbnail.png" alt="Avatar" id="userAvatar"/>
<div class="accountStats">
Other Stuff
</div>
</div>

Answer 2

Please test this:
margin-top: -156px;

Answer 3

Instead of manually calculating left margin to set image in center, we can use flexbox.
.user {
display: flex;
align-items: center;
justify-content: center;
}
body {
background: #efefef;
}
.account-container {
display: flex;
height: 100vh;
align-items: center;
flex-direction: column;
padding-top: 50px;
}
.card {
width: 350px;
border-radius: 5px;
box-shadow: 2px 5px 10px #ccc;
background: white;
}
.user {
display: flex;
align-items: center;
justify-content: center;
}
#userAvatar {
border-radius: 50%;
border: 3px solid #fff;
position: relative;
bottom: -50px;
object-fit: cover;
}
.accountStats {
height: 100px;
background-color: pink;
border-radius: 0px 0px 5px 5px;
}
<div class="account-container">
<div class="card">
<div class="user">
<img id="userAvatar" src="https://images.pexels.com/photos/4587979/pexels-photo-4587979.jpeg" width="100px" height="100px" />
</div>
<div class="accountStats"></div>
</div>
</div>

Answer 4

use the "position" atrribute
#useravatar{
position:absolute;
top:0%;
left:0%;
}