Relative positioning

To position an element relatively 20px from the top and left of its normal position, the following CSS is used.

#two { position: relative; top: 20px; left: 20px; }

 Note how the other elements are displayed as if "Two" were in its normal position and taking up space.

Absolute positioning

Elements that are positioned relatively are still considered to be in the normal flow of elements in the document.  In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements.  The absolutely positioned element is positioned relative to nearest positioned ancestor.  If a positioned ancestor doesn't exist, the initial container is used.

In the example below, the blue ancestor div is positioned relative (so it becomes the nearest positioned ancestor) and box Two is positioned absolutely:

#ancestor { position: relative; background: #ddf; width: 500px; }
#two { position: absolute; top: 20px; left: 20px; }

If #ancestor had not been positioned relative, box Two would have appeared relative to the upper left corner of the page.

Fixed positioning

Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport.  This is often used to create a floating element that stays in the same position even after scrolling the page.  In the example below the "One" box is fixed 80px from the top of the page and 20px from the left:

#one { position: fixed; top: 80px; left: 20px }

When viewing the top of the page, the position box appears in the upper left, and after scrolling, it remains in the same place relative to the viewport:

Gecko notes

In Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0) , handling of absolutely positioned elements inside tables was fixed. Previously, if you had a positioned <table> element inside a positioned block element, such as a <div> , a position: absolute; styled element inside the table would be positioned relative to the outer <div> rather than the table, which is the nearest positioned ancestor. This was a bug, and has been fixed. See this blog post for a more verbose explanation of the details.

Internet Explorer notes

In Internet Explorer, fixed positioning doesn't work if the document is in quirks mode.