One of the most important and also misunderstood of all CSS topics is positioning. Using CSS, you can declare 3 different kinds of position. These are:

• Static
• Relative
• Absolute

Static

Static positioning is the default position of an element on the page. If you did not declare any other kind of position then it would be static. An element with a static position will be part of the normal flow of the document, meaning that it will come after any preceding elements and other static elements will flow around it.

Static elements can not be moved using commands such as left:20px because this would mean the normal flow of the document would be altered. Static elements can be moved using margin command however.

Relative

This is the most misunderstood of the 3 positioning commands. Relative positioning is moving an element in relation to its default position. The element can be moved using left, right, top and bottom commands and you could make elements overlap each other if you wished. One thing to remember is that the space which the element occupied before it was moved will still behave as if the element was still there. This is because when you move an element using relative positioning, the actual document flow is only altered by appearance, it is not physically changed.

Absolute

Absolute positioning is something that is sometimes overused by those new to CSS. Many people are amazed by its ability to place elements anywhere on the screen but it is easy to get in trouble by using it incorrectly.

An absolutely positioned element is one that is taken out of the flow of the document and positioned at precise co-ordinates on the page. Top, left, right and bottom commands are used to specify the co-ordinates (eg left:20px;).

Absolutely positioned elements are positioned relative to the top left of the viewport unless they are contained within another element that has a position: relative, or position; absolute. In this case the element will appear in the specified position within its parent element.