position (CSS property)

Description

The position property, together with the float property, controls the way in which the position of the element’s generated box is computed. See Positioning for details about element positioning.

Boxes with a position value other than static are said to be positioned. Their vertical placement in the stacking context is determined by the z-index property.

Value

absolute
The value absolute generates an absolutely positioned box that’s positioned relative to its containing block. The position can be specified using one or more of the properties top, right, bottom, and left. Absolutely positioned boxes are removed from the flow and have no effect on later siblings. Margins on absolutely positioned boxes never collapse with margins on other boxes.

fixed
The value fixed generates an absolutely positioned box that’s positioned relative to the initial containing block (normally the viewport). The position can be specified using one or more of the properties top, right, bottom, and left. In the print media type, the element is rendered on every page.

relative
The value relative generates a positioned box whose position is first computed as for the normal flow. The generated box is then offset from this position according to the properties top or bottom and/or left or right. The position of the following box is computed as if the relatively positioned box occupied the position that was computed before the box was offset. This value cannot be used for table cells, columns, column groups, rows, row groups, or captions.

static
The value static generates a box that isn’t positioned, but occurs in the normal flow. The properties top, right, bottom, left, and z-index are ignored for static boxes.

inherit
The value inherit causes the element to take the same computed value as its parent (see The CSS Property Value inherit) for more information.