9.1 Positioning Elements

CSS positioning allows any element to be placed exactly where desired on a page. Together with floats, the position property gives many possibilities for creating advanced and precise layouts. There are two choices for positioning: absolute and relative. The difference between absolute and relative positioning is simply how the position is calculated.

Absolute positioning

Elements positioned absolutely don't obtain any space in a document and so don't leave empty spaces after being positioned. To position elements absolutely, the position property is set to absolute. The values left, right, top, and bottom can subsequently be used to place an element.

For example, to position a headline 100px from the top of the document and 200px from the left we could add the following to the style sheet:

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

Relative positioning

To position an element relatively, the property position is set to relative. The position is caculated from the original position in a document. The element still obtains a space in the document after it is positioned.

For example, to position two pictures relative to their original position on a page (notice they will leave empty spaces at their original positions in the document):

#pic1	{position:relative;
	left: 350px;
	bottom: 150px;}

#pic2	{position:relative;
	left: 150px;
	bottom: 500px;}