CSS “Absolute” positioning screen resolution problem
filed in Web Design on Nov.19, 2008
If you position an element (an image, a table, or whatever) absolutely on your page, it will appear at the exact pixel you specify. Say I wanted a graphic to appear 46 pixels from the top of the page and 80 pixels in from the right, I could do it. The CSS code you’ll need to add into the image is:
img { position: absolute; top: 46px; right: 80px; }
The problem is that when you change the screen resolution, say from 800×600 to 1024×768, the image placement also being changed.
SOLUTION:
Absolute positioning works by using the next available parent container that is positioned (absolutely or relatively).
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.


December 7th, 2008 on 11:37 pm
Brilliant!
Glad someone out there knows there stuff. I was amazed at the amount of wrong answers I found to this problem…
December 15th, 2008 on 4:10 am
Thanks buddy!
May 20th, 2009 on 2:15 am
Brilliant!! Worked best on IE7. Somehow on IE6 the element is not displayed. Do you know any reason why it could be so…
May 28th, 2009 on 7:49 am
good man a simple solution to a most common problem
Thanks got it worked!
July 16th, 2009 on 12:33 pm
Thanks man!
August 25th, 2009 on 9:01 am
Thank you very much! You saved me TONS of time!