None or Static No Properties

0px top,
0px left

None or Static

Box floats to the left of the containing box and text drops to next line.

None or Static

20px top, 20px left

None or Static with Inset

Box floats to the left of the containing box and text drops to next line. Static positioned elements are not affected by the top, bottom, left, and right properties.

None or Static with Float

20px top, 20px left

None or Static with Float

Box floats to the left of the containing box and text flows around it.

Fixed

20px top, 20px left

Fixed

Fixed position relative to html and taken out of the text flow. Note that it doesn't move when the page is scrolled. z-index controls if it's in front or back of another element.

If you use Fixed and set measurements to percentages, such as 50% left, 50% top, and then subtract half of its width and height, Fixed can be used to center an element.

(To center text top and bottom, start with div p{text-align:center; vertical-align:middle; margin-top:42%;}, but you may be better using a table element instead of a div, which will center text top-and-bottom automatically.)

Absolute

20px top, 110px left, z-index -10

Absolute

An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is html. (Which it is, in this case.) It scrolls with its parent. z-index controls if it's in front or back of another element.

Relative

30px top, 30px left

Relative

Changes position relative to the container, but is not removed from the text flow (leaves a space where it was, overlaps other items).