Question: How can I position things on the screen so that they always appear in the same position on the screen. I need absolute positioning that is completely independent of the screen resolution used by my visitors?
Answer:Disregarding the obvious position (the top left corner which is the 0,0 position on the screen) an exact absolute position on the screen will be at a different pixel location depending on the screen resolution used by the individual visitors to your site. The location on the screen that is at a location of 20,10 when viewed at 800x600 resolution will have a location of 40,20 at 1600x1200 resolution (and other values for other resolutions).
To be able to assign something to an exact position on the screen, independent of the resolution, we need to take the screen resolution into account in calculating the location that corresponds to our absolute screen position.
To do this we first determine the location relative to one resolution. It doesn't matter which resolution you pick for this. Next we work out the relative size of the portion of the screen to the left and above the position relative to the full screen. For example at 800x600 the position 20,10 is 1/40th of the way across the screen and 1/60th of the way down.
var top = screen.height / 60;
var left = screen.width / 40;
This code would set top to 10 and left to 20 at 800x600 resolution as we wanted since 600/60 is 10 and 800/40 is 20. At 1024x768 resolution top would be set to 768/60 (12) and left would be set to 1024/40 (25) which is as close as we can get to the same absolute position on the screen. The equivalent absolute screen position would be calculated for other resolutions.
Now all we need to do is to substitute the variables 'top' and 'left' in place of the top and left values in your code in order to reference that absolute position.
Note the above discussion relates to absolute positioning on the screen. If you require absolute positioning within the browser window then substitute screen.availWidth for screen.width and screen.availHeight for screen.height and perform the same calculations as above. In this instance the resultant left and top positions calculated should be used within code that is calculating relative to the browser window rather than the whole screen.
This article written by Stephen Chapman, Felgall Pty Ltd.