Quickly learn how relative and absolute positioning can make CSS do anything you can dream up.

CSS Absolute Positioning

CSS by default likes to stack elements from top to bottom in a page (at least the block level elements). However there are a few occasions where you need to unlock these restraints and place an elements EXACTLY where it needs to go, and this wont really fit into the box model as you know it.

This is where relative and absolute positioning comes in.

Imagine I have a parent div in the shape of a simple square box. And a smaller div within, a child box if you will.

Now I want to place that child box 3 pixels from the top and 3 pixels from the left side of its bigger parent box.

How do we do this? Well firstly you need to give the parent box a position of relative.

#parent-box {
position: relative;

Without this our child box will consider the whole page body its canvas. But with this, the child box will now only be positioned within its’ parent’s bounds.

Now on the child box give it a position of absolute, this will lock this box in place within the bounds of its parent, So now you want to give it a top value of 3 and a left value of 3.

#child-box {
position: absolute;
top: 3px;
left: 3px;

This will give us the exact position we are looking for, regardless of the box model.

Understanding this concept will allow you to fully take advantage of CSS and really have nothing holding your creativity back. So make great use of it!

And thats it for this entry.