CSS position: absolute screen resolution problem

Question

CSS code:

top:45;
left:98;
float:right;
position:absolute;z-index:2;

I have done the above coding for a floating div when I wa

Answer 1

Absolutely positioned elements are positioned according to either a relatively positioned ancestor or the window. It sounds like in your case, it's being positioned in the window.

The way to fix this is to put your absolutely positioned <div> inside a relative container. That way, as the window changes size, it will stay in the correct spot:

<div style="position: relative">
    <div style="position: absolute; left: 98px; top: 45px;">
         This div will always be 98px from the left and 45px from the top of its parent .
    </div>
</div>

Answer 2

Assuming the element is not contained within another element with a position of relative, the element you are positioning should be in the same position regardless of resolution.

Make sure you use:

top: 45px
left: 98px

You left the pixel declaration off in your code above.

Also, float:right is not required on the positioned element, as position:absolute will take it out of the normal flow of the document anyway.

Answer 3

None of the above solutions work for me... keep it on absolute position and give margin-top, margin-left...in %age like;

margin-top:10%;
margin-left:5%;

that will automatically adjust w.r.t. screen resolution...

this worked perfect for me. tested on different resolutions.

have a fun!

Answer 4

Instead of pixel, use the %. It may help you to produce the output.