There are many ways to position your elements in CSS. Relative positioning, absolute positioning or a combination of both. I’ll explain those ways with some clear examples.
position:static
Our example file is a simple page with one div, which has two nested divs inside it. Click here to view. There is no position specified in the CSS so the default value is applied: position:static;. There is no need to specify that in the CSS-file unless you need to override a positioning that had been previously set.
position:relative
You can use relative positioning to position an element relative to where it would normally be. For example we move div one-one 40 pixels to the left and also 40 pixels to the top. The CSS code:
.one-one {
position:relative;
left:40px;
top:-40px;
}
You can also use bottom:40px; instead of top:-40px;, but most webdesigners always specify left and top. Let’s take a look at the result. You see that the div one-one has moved 40 pixels to the left and 40 pixels to the top. The div is moved, but this hasn’t affected the flow of the page. The space where the div was before we moved it, is empty.
position:absolute
With absolute positioning, the div is removed from the page flow and moved exactly to the specified place. Let’s move div one-two to the upper-right corner. You’ll need this CSS code:
.one-two {
position:absolute;
right:0;
top:0;
}
There is no need to say 0px, because 0px is exactly the same as 0cm or 0%.
This is what the result looks like. The space which was used by div one-two is now empty.
relative + absolute
This is one of my favourite tricks. By using relative and absolute positioning, you can place div one-one in a corner of div one. The code:
.one {
position:relative;
}
.one-one {
position:absolute;
right:0;
top:0;
}
By setting div one to relative, div one-one is placed in the upper-right corner of div one. Click here to view.
float:
float: is also a very convenient CSS attribute position elements. With float:, you can float an element against the left or right border of it’s parent element. In this example, we’ll let div 1-1 and div 1-2 float inside div 1. The CSS code:
.one {
width:600px;
}
.one-one {
float:left;
width:200px;
}
.one-two {
float:right;
width:200px;
}
See the outcome here. Thanks to David Karasek for remembering me of the float: attribute.
Please digg this article if you liked it or share your thoughts in a comment.
1
Very good article, but you seem to be missing one: float.
2
David Karasek, thanks for remembering me of float. I forgot it in this article. It’s updated now
3
Nice one, always forget to put position: relative so I can position one div with absolute value to one corner of parent element
4
You forgot fixed positioning, one of the less used but more powerful positioning attributes. Of course it doesn’t work in IE6, but it’s a very valid attribute nonetheless.
5
It’s a decent article that covers the basics. But yes, you forgot to mention the fixed positioning and perhaps it would be wise to spend a word or two on how margins collapse using static and relative but not with any of the others.