Absolute v Relative Divs

I use absolute positioning everywhee but can't figure relative

[peter andreas]

I know this is an extremely stupid question. I have several good books on CSS and have built a site using it which I'm happy with. However, I use absolute positioned divs everywhere and they seem to work well and I like the pixel precision you get. BUT I can't figure out how relative positioned divs work,( or make them work), the just don;t behave as I would expect. All my books don't really tell , well if they do I can't see it! Up to now Iv'e thought well I'll just stick to absolutes but could anyone explain what the relative refers to is it the containing div or the preceding div or the next div.. I know a stupid question but I think I'm creating a lot of work for myself by creating scores of absolute positioned divs when maybe a few divs which work relative to each other would be better...say in a table of divs

[DrDoc]

Relative positioning moves the element relative to its original position. For example:

position: relative;
left: 25px;

...would move the element 25 pixels to the right, relative to where it would be located if not positioned at all.

You already know that absolute positioning allows elements to overlap each other, being taken out of the normal page flow, not affecting surrounding elements at all. Relative positioning basically only moves the "projection" of the element, leaving an empty box where the element was originally located. This can be used to create neat effects:

<span style="background-color:#666;"><img src="http://www.google.com/images/logo.gif" style="position:relative; top:-3px; left:-3px;"></span>

[peter andreas]

Thanks for that. I'm experimenting with your example putting more elements together etc.

Is there any situation where relative is betetr than absolute, apart formn the effects you can get?

I have found that absolute is pretty stable across browsers but relative (where I have tried to use it but I'm unsure exactly what rel positioning is doing) seems a bit flaky and falls over a lot.

[DrDoc]

Relative positioning is extremely useful if you want to position a child element within it's parent. For this to work, the parent must be positioned (or else absolute positioning will apply to the viewport). Simply specifu

position:relative

, but with no

top

or

left

values (or explicitly set them to zero). Voila! The parent is now positioned, though not moved, and the child can be positioned within it's parent's boundaries.

[peter andreas]

Thanks very much I'l give it ago. So could I use relative positioned divs to give the same effect as in a table, rather than say 100 absolutely positioned divs (for a 10x10)

[DrDoc]

If that's the effect you want -- why not use a table? ;)

[peter andreas]

Yes-Maybe I should! Thanks

[drbrain]

changing the 'position' attribute from anything other than 'static' creates a new containing box. You can create a relatively positioned box with no offset, then use absolute positioning on one of its children to perform more interesting transformations of content.

I did a write-up of this in a long-ago post:

[webmasterworld.com...]

(I've also placed a copy of this on my personal website.)