Positioning Elements

An element styled with position:absolute is positioned at the specified coordinates relative to its containing block.

Absolute (and fixed) positioning are very different than static and relative positioning. Both absolute and fixed positioning remove the element from the normal flow of the document. The rest of the document flows normally and fills in the space vacated by the absolute or fixed position elements. Example

The absolute position value:

offsets an element box relative to a positioned containing block which is either:
- the nearest ancestor containing block that is styled with a position declaration of its own and that position value is something other than static ...OR...
- if no ancestor containing block is styled with a position other than static (the default), then the absolute element is offset relative to the document BODY element
uses left, top, right, and bottom properties to tell the user agent to put the box at a certain distance from one of the edges of either the positioned containing block or the BODY element
takes an element out of the normal document flow so it does not impact the layout of sibling element boxes
margins of absolutely positioned boxes do not collapse

With absolute positioning, the box is completely removed from the normal flow of the document, and surrounding element boxes are placed as if the absolute element didn't exist.

Positioning Syntax

position: value; 
offset: value;

Elements can be offset using any one of these options; top, left, bottom, and right. Top and left are the most common options.

p#specialpara {
   position: absolute; 
   top: 20px; 
   left: 150px;
   }

In our Example (same one linked above) the third paragraph has been styled with position:absolute. The space that the absolute paragraph would have occupied in the normal flow of the rendered document is collapsed and the positioned paragraph has now moved up to 20 pixels from the top of the window and 150 pixels from the left side. This element doesn't care whether there is already another element at that same position in the normal document flow. In our example the x/y position of the absolute paragraph is relative only to the top-level containing element, the BODY element.

I find it easiest to think about absolutely positioned elements as being rendered on a separate layer in front of or behind all the other normal markup elements even though the positioned element and its content exists in the HTML markup along with everything else. We will talk about the idea of layers a little more when we cover the Z-index property, shortly.

Note: If you scroll to the bottom of the Example window, the absolute element disappears from view as we move down the page just like the rest of the BODY's nested elements.

Positioning Context

Initially, one of the major reasons for using CSS, and especially positioning, was to move away from table-based layouts. The ability to offset the position of one element in relation to another containing element, in combination with floated elements, makes CSS positioning leaner and more flexible than a table could ever be.

In the example popup above, 3 of the 4 paragraphs are statically positioned. In other words, they are just plain P tags that flow normally within the document. The third paragraph is taken out of the flow and positioned absolutely. Because there is no positioned ancestor element in the document, the absolute paragraph is, therefore, positioned relative to the BODY element.

In the Stylin' book (p.116), the author introduces the concept of contextual positioning which allows us to offset one element with respect to another element. You can use any containing element as the context against which a nested element is absolutely positioned as long as the containing element has been styled with one of these three types of positioning: relative, absolute, or fixed.

If you wish to retain the position of the containing element within the normal flow of the document, the best choice is to apply relative positioning without specifying any x/y offset values.

Here is an Example of a relatively positioned ancestor DIV element which contains an absolutely positioned nested DIV. The ancestor DIV uses relative positioning but with no x/y offset so it retains its position in the normal flow of the document. The nested, absolutely positioned DIV is offset from the top (90px) and left (40px) sides of its relatively positioned ancestor DIV.

Here is another Example of absolute positioning. This time we start with a relatively positioned ancestor DIV that, again, I left positioned in the normal flow of the document. This relatively positioned ancestor DIV contains an absolutely positioned DIV. And, in turn, this absolutely positioned DIV contains yet another absolutely positioned DIV. Each of the two DIVs with absolute positioning are offset from the top left corner of their positioned ancestor element.

Key points to remember regarding absolutely positioned elements:

when a web page is rendered in a browser, an absolutely positioned element is removed from the normal flow of the document and, essentially, exists in a separate layer
an absolutely positioned element will position itself in relation to its most recent positioned ancestor element, or to the BODY element if no ancestor elements are positioned
a "positioned ancestor element" must be styled with either relative, absolute or fixed positioning

Positioning Elements

Absolute Positioning

Positioning Syntax

Positioning Context