Position Example: absolute

See the code

An element with a property of position: absolute creates a positioning context relative to another element on the page i.e. a positioned ancestor or, if it has no positioned ancestors, the root element. It also creates a containing block context for any of its descendents.

The element's offset properties will be relative to the position of the other element i.e. to the top,left of the enclosing parent or the document root.

When an absolutely positioned element is moved it is taken out of the normal flow, its original space is not maintained, and it will overlap any element found in its new position.

The highlighted box in the above example is moved 25 units from the top and 57 units to the left of the page's top, left corner. The space it would normally have occupied (between the two blue boxes) has collapsed. The red dot it contains is also absolutely positioned, but, as its container is a positioned element, it stays confined within in it.

The highlighted box, and the absolutely positioned red dot within it, will move independently of the blue boxes as the page is resized.

Examples from Eric Meyer's CSS Positioning

This paragraph does not establish a containing block for any of its descendant elements that are absolutely positioned. Therefore, the absolutely positioned boldface element it contains (boldface) will be positioned with respect to the initial containing block.

Thanks to position: relative, this paragraph establishes a containing block for any of its descendant elements that are absolutely positioned. Since there is such an element-- that is to say, a boldfaced element that is absolutely positioned, placed with respect to its containing block (the paragraph), it will appear within the element box generated by the paragraph.

Nesting absolutely positioned elements

An absolutely positioned element creates a containing block context for any of its descendents.

absolutely positioned element A
top: 0; right: 0; width: 15em; height: 100%;

absolutely positioned element B bottom: 0; left: 0; width: 10em; height: 50%;

containing block
(relatively positioned)

Using `auto` values

auto values are computed by the browser. It will use specified property values when they are given and the formula to assign unspecified values. If all values are specified, they are used and no 'computed' values are necessary.

In this example, the unspecified property is used to make up the height difference. In element A, neither top nor bottom is specified so the element is 'shrink-wrapped'. For element B, bottom is left undefined, in element C, top is undefined. Extra space is alloted to the undefined property.

element A

element B

element C

Centering an element vertically

We can take advantage of the behaviour to center elements. Here, Element D will be centered vertically IF there is no other constraint on the element's height. top: 0; left: 0; bottom: 0; height: 5em; margin: auto 0;

element D

but here all margins are set to 0
no internal calculation is needed
and no centering occurs