Zooming and postioning problems

Question

I'm having an issue with positioning on a weeb OC website I'm making. The position of the picture (empty pic with borders) won't stay where it is when I zoom in and zoom out.

Here's how it is when at 100% zoom: https://cdn.discordapp.com/attachments/777816226264383500/824975774159339550/unknown.png

Here's at 50% zoom: https://cdn.discordapp.com/attachments/777816226264383500/824976068313088030/unknown.png

Also here is the code for the CSS of that image:

.me {
    border-style: solid;
    border-color: maroon;
    border-radius: 20px;
    box-shadow: 5px 5px 5px black;
    position: absolute;
    left: 30%;
    top: 50%;
    height: 400px;
}

Answer 1

You have to position .me relative to the parent if you won't do that, you're positioning is straight to the body. Your HTML structure should look like this, where .parent is your image wrapper and .me is your picture:

.parent{
position: relative;
}
.child{
position: absolute;
}

<div class="parent">
  <div class="child"></div>
</div>

If something is unclear let me know :)