position relative / absolute

They have: 426 posts

Joined: Feb 2005

relative: position relative to where it was originally positioned. (its pixel positioning on the screen)

absolute: positioned relative to the that it is contained in?

Im a bit confused. And why would you use position absolute or relative with no coordinates? I realise that some other attributes wont work unless specified though.

Basically what im asking is when and why do you use it?

They have: 16 posts

Joined: May 2006

Basically, relative positioning places the object related to other objects while absolute puts it in the exact spot you tell it.

For a website, you might have 3 columns..there you would use relative because you want each column to be relative to each other.
You might also want a 'alert box' that stays at the very top of the screen, and is positioned over the top container. You would use absolute for that positioning.

If that doesn't make sense, maybe try this tutorial:
http://www.webreference.com/html/tutorial18/

For the most part you would probably want to use relative so everything can stretch with the screen.

Here is another comparison:
http://www.echoecho.com/csslayers.htm

Hopefully that helps, good luck!

He has: 629 posts

Joined: May 2007

Relative positioning has two purposes. You can shift the content of a relatively positioned element using the top / left / bottom / right properties, if that's what you are after. You can also specify position: relative -- with or without those positioning properties -- to establish a new context for absolutely positioned elements.

For example, if I position a box absolutely top left, it normally goes in the top left of the browser window. If I put it in a container that has position: relative; on it, my box now goes in the top left of that container instead.

I hope I have not confused you.

Cordially, David

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.