CSS Absolute positioning
by Guna[ Edit ] 2011-10-14 12:28:43
Hi,
If you tried to position any element absolutely in your web page (div, table,image, or whatever it may be) , it will be placed exact pixel what you specified.
For example the following will be placed 400px from left and 50px from top of your webpage,
<div style='position:absolute;top:50px;left:400px;width:250px;border:1px solid #000000;height:100px;'></div>
It'll be placed exactly where you wanted, right? but when you check this in a different screen resolution, say from 800 x 600. Now the div is placed in different position than the previous. so how to fix this? Screen resolution does nothing here, but
absolute positioning works by using the next available parent container that is positioned (absolutely or relatively).
FIX:
So, to fix this, all you need to do is simply add a ‘position:relative’ to the parent of the div you’re trying to position.
That will do the trick!
