Posted on: 6/16/2008 By: Chris Coyier
A
page element with relative positioning gives you the
control to absolutely position children elements inside
of it.
To some, this is obvious. To others, this may be one of
those CSS
“Ah-ha!” Moments. I remember it being a big deal for me when I first
“got it”.
Here is a visual:

The
relative positioning on the parent is the big deal here. Look what
would happen if you forgot that:

Might not look like a
big deal in this small example, but it really is a significant change.
What is happening is the absolutely positioned elements are positioning
themselves in relation to the body element instead of
their direct parent. So if the browser window grows, that one in the
bottom left is going to stick with the browser window, not hang back
inside like his well behaved brother from the first image.
Once
you “wrap” your head around this concept (rim-shot) you will find little
uses for it all over the place, and start noticing examples of other
places using it. It’s like when you learn a new word and then you start
hearing it everywhere. Yeah.
Posted on: 6/16/2008 By: Chris Coyier
A
page element with relative positioning gives you the
control to absolutely position children elements inside
of it.
To some, this is obvious. To others, this may be one of
those CSS
“Ah-ha!” Moments. I remember it being a big deal for me when I first
“got it”.
Here is a visual:

The
relative positioning on the parent is the big deal here. Look what
would happen if you forgot that:

Might not look like a
big deal in this small example, but it really is a significant change.
What is happening is the absolutely positioned elements are positioning
themselves in relation to the body element instead of
their direct parent. So if the browser window grows, that one in the
bottom left is going to stick with the browser window, not hang back
inside like his well behaved brother from the first image.
Once
you “wrap” your head around this concept (rim-shot) you will find little
uses for it all over the place, and start noticing examples of other
places using it. It’s like when you learn a new word and then you start
hearing it everywhere. Yeah.