Positioning

The position property is used to define whether a box is absolute, relative, static or fixed:

Static Postion:
Static is the default value and renders a box in the normal order of things, as they appear in the HTML.
This is how all objects on a page are positioned by default and with this setting all objects are to remain in this position. The top, bottom, left and right properties don't apply to static objects.

Relative Position:

Relative is much like static but the box can be offset from its original position with the properties top, right, bottom and left. With the property, the coordinates of this document are based on the position it was in when the document is fully loaded.

Absolute Position:

Absolute pulls a box out of the normal flow of the HTML and delivers it to a world all of its own. In this crazy little world, the absolute box can be placed anywhere on the page. using top,right, bottom and left. When this property is used, it's moved from the normal object flow and other objects will change position and will move into the space this object once occupied. The absolute class allows you to place the object in front of or behind other objects.

Fixed Position:

Fixed behaves like absolute, but it will absolutely position a box in reference to the browser window as opposed to the web page, so fixed boxes should stay exactly where they are on the screen even when the page is scrolled. The coordinates of this element use the browser window, so if the document is scrolled, the fixed objects don't scroll with it.