Annotation Positioning...

Hello guys!
I'm creating a Custom Element anchor for putting some annotation and I wanna positioning the annotation manually. I could do it by CSS but the problem is when I zoom out the annotation tends to go too far away from the object. How can I keep the same relative position even when I zoom out?

I made this GIF for better understanding and this is the CSS used to positioning the annotation:



CSS code used for positioning:

#my_design {
position: absolute;
left: 10%;
top: -3%;
box-shadow: 0px 0px 10px rgb(180, 180, 200);
-webkit-box-shadow: 0px 0px 10px rgb(180, 180, 200);
background-color: #000;
border-radius: 20px 20px 20px 0px;
color: #fff;
box-sizing: border-box;
padding: 6px 12px 6px 12px;
box-shadow: 0 0 4px 2px #fff;
font-family: Arial;
font-weight: bold;
font-size: 12px;
line-height: 1.25;
}

Hope you guys can help me.
Thanks you!!

Hello
Please try to use the constant "left" and "top" values in %, for example:
#my_design {
position: absolute;
left: 10px;
top: 20px;
box-shadow: 0px 0px 10px rgb(180, 180, 200);
-webkit-box-shadow: 0px 0px 10px rgb(180, 180, 200);
background-color: #000;
border-radius: 20px 20px 20px 0px;
color: #fff;
box-sizing: border-box;
padding: 6px 12px 6px 12px;
box-shadow: 0 0 4px 2px #fff;
font-family: Arial;
font-weight: bold;
font-size: 12px;
line-height: 1.25;
}

Thanks Roman! It helped but its still happening:



Here you see the Default Annotation: it's not centralized and even when you zoom out its stay on point.

Second you see My Anchor (Custom Element) with CSS (left: 80px; top: -20px;) and it slightly goes off when zoomed out.
I could'n reproduce the same behavior as the default annotation does. Any Ideas why this happens?

I mean, I can live with this slightly offset, but if you have any other solution in mind I would like to give a try.
And thanks for helping me again. I appreciate this forum!