Confused with relative/absolute with DIVs

[Etaria]

I understand what absolute does.. especially from toying around with it so much tonight.. but I cannot understand relative?

when i type several <div style="text-align: center; position: absolute; right: 100px; top: 180px; height: 200px;"><img etc etc></div>

and then maybe another div tag to put another img below it.. same absolute reference.

So, for example if I have 3 images one on top of one another on a page... why would one even use relative? And what is it relative to? I am just not understanding all that I am reading on it.

So, for example... on my site.. I have on a page say 3 photos .. and then i want to start text below.. if I start with absolute, it seems I have to keep using absolute as I go down and I keep previewing it to make sure it is not overlapping... is this the proper way to use DIVs or should I be using relative?

[Buddy Bradley]

Relative positioning will move the element 'relative' to where it started from - so:

#mydiv {
  position: relative;
  top: 100px;
  left: 100px;
}

#mydiv will be moved 100px to the right and down from where it would normally be and will leave a space where it should have been.

Absolute positioning doesn't leave that space - the element is removed from the document flow, and repositioned relative to the position of its nearest ancestor that has a position set (or the body if no such ancestor exists).

In general (in terms of layout techniques) using just absolute positioning is not recommended; it doesn't cope well with text resizing, and means that you cannot use any other kind of positioning on elements after the absolutely positioned elements in the source code.

[Etaria]

Ah.. that makes more sense.. think I will have to reread it 10 times for me to really grasp it...

Question though... let's say I have.. wait i think i understand... so if I have say a picture and have the atribute top:10px; and then say another picture (also relative) and have the attribute bottom:10px,

the top picture moves down a smidge and the bottom picture moves up a smidge.. and they could overlap, maybe?

Now.. my question is...

say for example I have <DIV style="width 500px">
should I be using px?

Now let's say I have a small photo.. how to I get it to center within that 500px?

[LJK]

Hi -
Remember, margins [space betw. an element & another]
and padding [space betw. an elem. & its own 'border']
are your friends when it comes to positioning, too!
[And - what styles have you used on the body tag or
the containing div for all of the page's elements? That
can influence positioning as well.]

Just set the img to display:block; text-align:center; margin:0 auto;
then if it's 250px in height, add padding:125px 0; to add cushioning
at the top & bottom but not to the sides.

Good luck,
El