0px top,
0px left
Box floats to the left of the containing box and text drops to next line.
20px top, 20px left
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.
20px top, 20px left
Box floats to the left of the containing box and text flows around it.
20px top, 20px left
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.)
20px top, 110px left, z-index -10
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.
30px top, 30px left
Changes position relative to the container, but is not removed from the text flow (leaves a space where it was, overlaps other items).