This is a simple example to show how absolutely positioned blocks can be positioned within a relatively positioned container. Try resizing your browser, and you'll see how the whole blue block moves, but the absolutely positioned blocks inside it stay put relative to each other. Meanwhile the maroon box is not inside the blue box, but just inside the <body> so it stays put relative to the browser window. The key for controling this is the position: statement of the containing block. This sets the positioning context for the child elements.
The blue box has position:relative, so the child elements are positioned in an absolute position relative to the top left corner of the containing block. If that position statement is omitted (it could also be position:absolute; or fixed; but not static), then the positioning context for the child elements will default to the context of the parent element, often the body element -- basically the browser window itself, but not exactly -- a picture is worth a thousand words, so try resizing and scrolling around and you'll see the differences between the absolute on the right and the fixed on the left. Note the Google Javascript for fixing IE (I used the IE8.js) is loaded on this page, so the positioning should work, despite IE's lack of support for it.
The green block is included to show one technique for centering absolutely positioned content.
To see what this would look like with relative positioning, click here
For a thorough explanation of the CSS positioning concepts, check out this: http://www.quirksmode.org/css/position.html