Positioning of Elements

With CSS positioning, you can place an element exactly where you want it on your page. Together with floats, positioning gives you many possibilities to create an advanced and precise layout.

For example, if we want this headline positioned 100px from the top of the document and 200px from the left of the document,

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

Absolute Positioning

An element which is positioned absolute does not obtain any space in the document. This means that it does not leave an empty space after being positioned.

To position an element absolutely, the position property is set as absolute. You can subsequently use the properties left, right, top, and bottom to place the box.

Relative Positioning

To position an element relatively, the property position is set as relative. The difference between absolute and relative positioning is how the position is being calculated.

The position for an element which is relatively positioned is calculated from the original position in the document. That means that you move the element to the right, to the left, up or down. This way, the element still obtains a space in the document after it is positioned.