Absolute Positioning

An element whose position property has the value absolute is said to be absolutely positioned, and is completely removed from the document flow: it doesn’t affect subsequent elements at all. It’s positioned with respect to its containing block, and it establishes a new containing block for normal flow children, and for descendants whose position property is set to absolute.

The top, right, bottom, left, width, and height properties determine the position and dimensions of an absolutely positioned element.

Both the position and the dimensions can be expressed using all four of the positional properties (top, right, bottom, left).1 Alternatively, you can specify the position of one corner of the box using top or bottom in combination with left or right, and you can specify the dimensions using width and (optionally) height.

An absolutely positioned element will overlap other content unless we make room for it in some way; for instance, by setting margins or padding on other elements. When several absolutely positioned elements occupy the same location, they’ll be stacked according to a stacking context.

Absolute positioning also makes it possible to place an element partly or entirely outside the viewport. This technique, which is known as the off-left technique, is sometimes used intentionally to hide content from visual user agents while keeping it visible for those using assistive technologies such as screen readers.2

Footnotes

1 This capability isn’t supported by Internet Explorer versions up to and including 6.

2 Setting display to none isn’t recommended, since some screen readers won’t announce such elements.

User-contributed notes

ID:
#2
Contributed:
by dawgraphic
Date:
Fri, 08 Feb 2008 00:37:21 GMT

I'd recommend including the statement from your containing block section here:

If the value of the position property is absolute, the containing block is the nearest positioned ancestor—in other words, the nearest ancestor whose position property has one of the values absolute, fixed, or relative.

I think it's also important that in order to be a containing block for absolutely positioned objects, it must be explicitly positioned.

Related Products