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 align HTML horizontaly using CSS

    How to create new top headers for weebly

    Menu CSS showing current page in a single html file

    CSS: how to make a span only as wide as its content

    how to combine css with php while loop and table?

    How to give a property to an element using its title in css [duplicate]

    CSS: How can I right-justify text against centered text?

    How do I position text within a box with css?

    CSS--how to detect screen aspect ratio and apply styling accordingly? [duplicate]

    How to create an highlight animation when a control gets focused [closed]

    How to place divs one next to another without floatant?

    How to apply css using ng-class in angularjs

    How to know when you have received an image in the browser?

    Any ideas about how to use CSS to emulate a messy stamp?

    CSS: How to set procentual width using display:flex?

    how to build a triangular slider? [closed]

    How to adjust responsive behaviour of menu bar's elements

    How to make a function set css width with a JavaScript variable?

    HTML/CSS - Input [Text] How to disable the browser from offering suggestings in the Dropdown?

    How To Outline a PNG (Transparent) image with CSS?

    How to add -moz & -o prefixes to code containing only -webkit tags

    How to I have a within a
  • align to the right side of the
  • How to get two column float left div layout to word wrap?

    How do I get text to wrap to not break out of the box using CSS?

    How can I make the ul list the same size as the input element in terms of width?

    How can I size these spans so that the pictures don't extend past them?

    how to prevent css and js being cached by internet service provider?

    How to use CSS on an Html.ActionLink in C#

    How do I make the cursor stay as a pointer on text using jquery/javascript?

    DOM: How to set element width based on iterator value and call a function on mouseover?