CSS - how to get position: absolute; to work well with different screen sizes
Tags: css,screen
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>