This page demonstrates how divs positioned with CSS render in relation to one another and the page. View source to see the stylesheet. Visit the W3C web site to read more about the CSS position property.
Statically positioned elements won't let you push them around. The divs on this page with position: static have the same properties as the other divs, left: 20px and top: 20px. However, this information doesn't affect the div's actual position. Note how it is flush with whatever comes before it, and in the case of static div #4, it renders where relative div #2 would be if it weren't offset by 20 pixels.
The relatively positioned divs understand that they ought to be offset by 20px, and render accordingly. They seem to be pretty predictable, until you get two relative elements in a row. Note how div #7 is flush with #6 instead of 20px below it. I don't understand why it does that, but it's a useful quirk to remember for when I'm creating actual pages where everything needs to line up properly.
Absolutely positioned elements are highly reliable and predictable, doing exactly what you tell them to. I offset the absolute div, #3, by 40 pixels to better demonstrate how it doesn't interfere with anything else on the page. This box, containing the text you are reading right now, is also absolutely positioned.
At first glance, the fixed div renders like the absolute div. But make your browser window smaller so that the scroll bar appears, then scroll down or sideways. You'll notice that the fixed div stays in exactly the same place relative to the containing window, no matter what the rest of the page does. (Oh, by the way, IE for Windows doesn't recognize position: fixed and so renders the div as if it were static.)