Understanding Relative Positioning
position: relative displays the element in the normal flow of the document, and its context box (ie: point of origin) is its position within the normal flow.
So, when you use position: relative to actually MOVE an element, you use the top/bottom/left/right properties to locate the specific corner RELATIVE to the element's position within the normal flow.
As you use the position property, ask yourself "where do I want to move the display of this element? Where will the browser start to 'count' to locate the corner of the element I am positioning?" If the answer is "I want to position this element RELATIVE to where it is in the normal flow" then position: relative is what you want.
However, most designers don't use position: relative to actually MOVE the display of an element. Rather, because position: relative keeps the element displaying in the normal flow of the document (and therefore the elements that follow in the code can "see" the element for their display location - remember the Visual Formatting Model), position: relative is used to RESET THE CONTEXT BOX of descendant elements that you are positioning absolutely. So, if you have a centered layout, and you want to position an element absolutely within the wrapper, you need to put position: relative in the style rule for the wrapper so the element inside it will start counting from the edge of the wrapper. We'll do this in the position: absolute exercise page.
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: relative, what happens is the element will invoke its z-index. But, it won't go anywhere. That is why it this is so useful for "resetting the context box" for layouts that use absolute positioning within a centered layout.