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!
Sam Crowe says
Michael,
This is a brilliant explanation of the matter at hand and I feel it pushes me over into a whole new level of mastery on this. Thank you for sharing this information.
Sam
John says
Sorry but I’m pretty sure divs 2 and 3 would be on top of each other if they both had absolute positioning 50px from left and top of div 1??
mobremski says
John,
I got to thinking about logistically, and I agree. However, that is the exact CSS I have in the file. So, (I love problem solving), this would mean that an absolute div inside another absolute div that are both inside the same relative div, reads the div it’s inside of as relative. (?) Thoughts?