Absolute and Relative Positioning

Absolute and relative positioning in CSS was one of the most difficult concepts for me to get my head around when I first started writing CSS.  I’d like to take a minute and explain it the way it was explained to me when I finally “got it”.

Let’s start by creating 3 div’s, one inside the other, each with their own ID selector:

<div id=”block-1″>

<div id=”block-2″>

<div id=”block-3″>

</div>

</div>

</div>

Now the concept behind relative and absolute positioning is that an object that is absolute positioned is done so inside it’s nearest “relative” selector.  Let me demonstrate.  I’ve styled the 3 div’s above, so that they are inside each other:

Here’s the CSS I used to do this:
#block-1 {
width: 500px;
height: 500px;
background: #000;
color: white;
}

#block-2 {
width: 400px;
height: 400px;
background-color: #666;
color: white;
}

#block-3 {
width: 300px;
height: 300px;
background: #333;
color: white;
}

Now, if I place relative positioning on Block-1 and then absolute positioning on Blocks 2 and 3, any placement I give them will be relative to edges of Block-1. To move absolute positioned blocks around you use the css “top, right, bottom, or left” and then tell the browser how many pixels you’re moving it. So, for example, if I wanted to place the boxes in the center of each other like this:

I would use this css:

#block-1a {
width: 500px;
height: 500px;
background: #000;
color: white;
position: relative;
}

#block-2a {
width: 400px;
height: 400px;
background-color: #666;
color: white;
position: absolute;
top: 50px;
left: 50px;
}

#block-3a {
width: 300px;
height: 300px;
background: #333;
color: white;
position: absolute;
top: 50px;
left: 50px;
}

(Now, you can of course accomplish this with margin’s and padding, but I’m using this as an example.)

You can see that I placed relative positioning on Block-1 and then the absolute positioning on blocks 2 and 3. If I would have placed the relative positioning on a div that surrounded the text of this whole post, instead of on block 1, blocks 2 and 3 would have shot into the top corner of the post (50px from the top and left of course) and block 1 would not have moved.

If I still had relative positioning on block 1 AND on a div surrounding the whole post, blocks 2 and 3 would remain inside block 1. Absolute positioning searches for it’s nearest “relative”.

I hope this makes sense for you. If you have any questions, feel free to leave a comment!