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 was working on 1024 resolution, but when I tested the same on different resolution it's out of alignment.

Please help how can we fix it.

Thanks in advance Dave

Answer 1

insted of pixel ,why dont u use the %.it may help u to achive the output

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

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 4

thanks buddie it worked f9..