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 a different resolution it’s out of alignment.

How can we fix it?

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>