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>


    CSS Howto..

    How to position CSS fixed JQuery dropdown bar

    How can you create a cross browser css menu that doesnt require you to provide a style for EVERY LEVEL of the menu

    how can i trigger multiple hover actions/events?

    CSS How to I align a header with a height of 2em to the bottom

    How to apply CSS directly to DOM TextNodes?

    How can I force a css flex child to be the only on its row?

    How to apply a class in the current slide using bxslider?

    How to refactor CSS based on HTML class

    How to get width of an image after setting the height

    How can I change color of visited cgridview row?

    How to exclude specific control from css?

    How to expand a div with css

    how to make the title bar fixed

    yui-css grid: how to get a 1/4 - 2/4 - 1/4 grid set up?

    How do I get stack my web page content in to 2 columns and be consistent on page sizes

    How can I give seperate margin to individual control and also keeping same style in CSS for all of them HTML5 [closed]

    How to select this td element?

    Showing images in placeholder on focus

    How to make inner div of Flexbox height of parent

    Use anchors and :target for navigation. How to show first layer by default

    How to set an auto minimum width on column with css?

    How to see CSS boxes in firefox inspector

    How can I center a figure with caption?

    how to make image in over than other like this

    How to add new property within existing css?

    IE11 dosen't show CSS-Content properly

    How to add nav icon images using max-width property in CSS

    How can I vertically align two floated divs?

    How to make page layout responsive for every successive little change in window size?

    How to align item to the very bottom within flexible box layout column?