CSS: Position

Definitions

The CSS position property can be used to define where an element is rendered on the current screen, and whether that element should move when page content is scrolled.

Position values:

static - This is default. Elements renders in order, as they appear in the document flow. Regardless of what left/top CSS properties you define, the element will always be layed out.

absolute - The element is positioned relative to its first positioned (not static) ancestor element.

fixed - The element is positioned relative to the browser window.

relative - The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT position.

Demo

Static

left:999px;
top:999px;
position:static;

Absolute

left:235px;
top:0px;
position:absolute;

Fixed

left:200px;
top:300px;
position:fixed;

Relative

left:20px;
top:0px;
position:relative;