Click to See Complete Forum and Search --> : Positioning object relative to a div tag
orangeIV
07-13-2007, 08:35 AM
When using absolute positions, objects are positioned relative to the top left of the screen. This means that when the screen resolution is changed, the absolutely positioned items move. And so, is there a way of anchoring absolute positions, positioning them relatively to another object such as a <div> tag or image. Does anybody know a way of doing this?
Thanks:) ;)
WebJoel
07-13-2007, 10:38 AM
Instead of 'cementing' the absolute positoion to the viewscreen, wrap the entire page in a 'wrapper' that is positioned 'relative', and then put the 'absolute' inside of that. This way, it remains for a better term, 'affixed' in that same spot.
<div style="position:relative; width:100%;">
<img src="#" style="position:absolute; left:125px; top:165px; width:150px; height:150px; background-color:green; border:3px double gray;" />
<img src="#" style="position:absolute; left:185px; top:150px; width:180px; height:90px; background-color:silver; border:3px double gray;" />
<img src="#" style="position:absolute; left:225px; top:25px; width:350px; height:150px; background-color:navy; border:3px double gray;" />
<img src="#" style="position:absolute; left:299px; top:75px; width:50px; height:350px; background-color:blue; border:3px double gray;" />
<div> The downside to this is that, being 'absolute', the images here are 'out of the document flow' and other content will be presented 'underneith' them without any concern. This can be alieviated by making the wrapper div have a defined width & height (and it would only be 'wrapper' of the 'absolute'), and position the relative DIV in the normal fashion.
-The problems absolute-positoning creates are not insurmountable so if you do this and encounter problems, come back and ask for assistance. :)