Look at the source code for this page. The page starts with a normal <table> here. The <td> element to the right here contains a <div> that is CSS-styled with "position:relative;" which provides the parent positioning reference for the contents inside it, namely two <img>s - the rainbow sky graphic and the Happy Elf - that are each defined with "position:absolute;" The Absolute Positioning removes these two <img>s from the document layout normal flow, and they are rendered (ie. "positioned") in relation to the parent block-level element - the aforementioned relatively-positioned <div>. Note that the Happy Elf graphic has been given a z-index to make sure it is rendered on top of the rainbow sky, even though its <img> tag appears first in the HTML code.
The <p>aragraph in the bottom right-hand corner of this document is absolutely-positioned to butt up against that corner of the page. Contained within that paragraph is the <img> tag that produces our friend, the absolutely-positioned Happy Elf graphic. Note that even though this time the parent block-level element is absolutely-positioned, the Happy Elf's <img> is identical to the one in the <td> above in its positional offset - a few pixels offset from the top and left. The point being that you can use position an element in relation to either a relatively-positioned element or an absolutely-positioned element.
A key to understanding the difference between aboslute positioning and relative positioning is that elements with absolute positioning are removed from the normal document flow. That is, their presence in the document does not affect where elements that have relative positioning are rendered within the document.
For more information, mouse over the Happy Elf in the bottom corner. Then view the page source for this document to see the code involved. Return to Previous Page
