CSS: Position Property

By Xah Lee. Date: 2010-03-20. Last updated: 2022-11-26.

The position property lets you:

Adjust position of elements.
Make elements into a separate layer.

The position property has 4 possible values:

position Value	Own Layer	Relative To
`static`	no	(Normal Flow) This is default.
`relative`	no	Relative to its normal position
`fixed`	yes	Relative to window
`absolute`	yes	Relative to its containing block. That is, the first parent that's not positioned `static`. If none found, then it's Root Element.

To specify the offset, use one of the following:

top:length
bottom:length

and one of:

left:length
right:length

Example:

div.x89647 {
position:fixed;
top: 1px;
left: 1px;
}

position:static

The position:static is the default for all elements.

The position of element of position:static is either below the previous element, or to the right of the previous element.

If the previous element is a block element, then next element is positioned below it. (block elements are div, p, img, h1 etc.)

If the previous element is a inline element, then next element is positioned to the right of it (or below if container box width is reached). (inline elements are span, a (link), b (bold), etc.)

position:relative

Use position:relative to adjust a element's position relative to its normal position.

AAA

BBB with relative position

CCC

See: CSS: Position: Relative

position:fixed

Use position:fixed to specify the positioning of a element with respect to the window. When a element has position:fixed, that element goes into its own layer. The normal flow of elements will flow as if that element doesn't exist.

See: CSS: Fix Element to Window

position:absolute

position:absolute make the element go into its own layer.

position:absolute's offset is relative to its “containing block”.

A “containing block” is effectively the first parent element that has a position value other than “static”. When no parent has any of “position” spec, then it is relative to the <html> element.

Example: