Absolute Positioning Inside Relative Positioning

Avatar of Chris Coyier
Chris Coyier on (Updated on )

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:

This 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.

You can play with the above demo here:

How about some examples?

I’d be delighted.

A “close” button you always want positioned in the upper left of a box (to replicate an operating system window).
A “home” button placed in the upper right of the window so that your users never feel too lost
A reminder on a sign up form to remind users that if they are already members to sign in above.
“Back to top” links to be placed in the lower right of each big block of text.

View Demo Download Files