Cool Stuff

The fastest way to master the basics of Adobe Photoshop

Click here to find out how

Photoshop Templates

Featured Photoshop templates - professional ready to use designs for your next project.

View all templates

CSS elements positioning - CSS tutorial

Learn how to set the element's boxes position within your css layouts

Category: CSS tutorials - Difficulty:

This allows you to have all the freedom to place an element exactly where you wish it to appear on your page.

The principle of this property is simple, box can be positioned anywhere in the system of coordinates.

For example, you are positioning a headline using the box model. Then, you thought you want the headline be positioned 100px from the top of the document and 200px from the left of the document, here is the command that you can use:

h1 {
position:absolute;
top: 100px;
left: 200px;
}

The property positioning in CSS is one way of placing elements in a very precise manner. If you will compare it to using a table or anything else for that matter, this is easier to use.

Absolute Positioning

Any element when positioned using “absolute” do not result to any space in the document. Simply put, the element does not provide an empty space after it has been positioned.

If you want to position an element in an absolute fashion, you just have to set the position property to “absolute” and then assign where you want to place the box by choosing between the properties left, right, top and bottom.

#box1 {
position:absolute;
top: 50px;
left: 50px;

} #box2 {
position:absolute;
top: 50px;
right: 50px;
}

Relative Positioning

If you rather want to position an element in a relative manner, you use “relative” as the property position. The only significant difference between the properties absolute and relative is that the way the position is being calculated.

Positioning an element in a relatively way is calculated from the original position of the element in the document. It is either you move the element to the right, to the left, up or down. So, unlike the absolute property, which does not give an empty space after an element was moved to another position, relative positioning still gets a space in the document after it is positioned.

Now, you already know how to make elements floats and how to position them according to your taste. You are given the chance to construct your pages in a variety of ways without having to put up with the traditional methods such as the tables and transparent images in HTML. When you use CSS, there are so many ways you can work on the appearance of your elements and it makes it all easy to maintain.