CSS - how to get position: absolute; to work well with different screen sizes

Problem :

If I want an element to be positioned at a certain position on my screen I can use:

position: absolute;
top: 614px;
left: 215px;

And on my screen this works perfect, the element is right where I want it to be. However if I use a bigger screen it is all wrong and if I use a really small screen you might have to scroll to see the element at all. How can you fix this? I've tried researching and I figured this was quite a normal issue but I haven't really found anything helpful. Thanks!

Solution :

The position absolute css works by placing something absolutely with respect to the parent element. If a parent element doesn't exit it will default all the way to the html element. Basically in short this means if your parent changes your absolute positioning changes.

It's a better idea to use percentages if you want it to be responsive. You can also use media queries to adjust positions as required.

  .my-absolute-px{
        position: absolute;
        top: 100px;
        left: 100px;
    }
    
    .my-absolute-percent{
        position: absolute;
        top: 50%;
        left: 45%;
    }

  
    
    <div class="my-absolute-px">Some px content</div>
    <div class="my-absolute-percent">Some % content</div>