Understanding Absolute Positioning
position: absolute REMOVES the element from the normal flow of the document, and allows you to "pin" one corner using the top/bottom/left/right properties. Where the browser starts to count from the top, bottom, left or right depends on the context box (point of origin) for the absolute value.
The context box for position: absolute is its MOST RECENTLY POSITIONED ANCESTOR. If none of its ancestors (remember your document tree!) has been positioned, then its context box is the body of the document.
If you want to use position: absolute on an element in a centered layout, then you need to reset the context box by making the wrapper THE MOST RECENTLY POSITIONED ANCESTOR. You do this by including a position: relative declaration in the style rule for the wrapper. This is called "resetting the context box." If you are using absolute positioning in some other element in the page, it would be the relevant ancestor to use to "reset the context box." We'll do that in our "CSS Imagemap" exercise.
Note: when you position an element, but don't use the top/bottom/left/right properties to actually move it, you need to know what will happen. With position: absolute, what happens is that the element leaves the normal flow and loses 100% width (if the element generates a block display box). Also, the element will invoke its z-index. But, it won't go anywhere.