CSS position

The CSS position property determines which of the positioning algorithms is used to calculate the position of a box.

The position property can be used in conjunction with the top, right, bottom, and left properties to position an element where you want it.

You can use the position property to make an element's position static, relative, absolute, fixed, or sticky. See below for an explanation on these.

Syntax

These values are explained below.

Possible Values

static

The element flows as normal. The top, right, bottom, and left properties don't apply.

relative

The box's position is calculated according to the normal flow. Then the box is offset relative to its normal position and in all cases, including table elements, does not affect the position of any following boxes. When a box B is relatively positioned, the position of the following box is calculated as though B were not offset. The effect of position: relative on table elements is defined as follows:

table-row-group, table-header-group, table-footer-group and table-row offset relative to its normal position within the table. If table-cells span multiple rows, only the cells originating in the relative positioned row is offset.
table-column-group, table-column do not offset the respective column and has no visual affect when position: relative is applied.
table-caption and table-cell offset relative to its normal position within the table. If a table cell spans multiple columns or rows the full spanned cell is offset.

absolute

The box's position (and potentionally, its size) is specified with the top, right, bottom, and left properties. These properties specify offsets with respect to the box's containing block. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings. Though absolutely positioned boxes may have margins, those margins do not collapse with any other margins.

sticky

The box's position is calculated according to the normal flow. Then the box is offset relative to its nearest scrolling ancestor and containing block and in all cases, including table elements, does not affect the position of any following boxes. When a box B is stickily positioned, the position of the following box is calculated as though B were not offset. The effect of position: sticky on table elements is the same as for position: relative.

fixed

Similar to absolute, but also doesn't move when scrolled. The box is in a fixed position that doesn't scroll with the rest of the content. When using the print media type, the box is rendered on every page.

The fixed value always creates a new stacking context. When an ancestor has the transform property set to a value other than none, then the ancestor is used as a containing block.

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial: Represents the value specified as the property's initial value.
inherit: Represents the computed value of the property on the element's parent.
unset: This value acts as either inherit or initial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

General Information

Initial Value: static
Applies To: All elements except table-column-group and table-column.
Inherited?: No
Media: Visual

Example Code

Official Specifications

CSS Positioned Layout Module Level 3 (W3C Editor's Draft)
CSS Positioned Layout Module Level 3 (W3C Working Draft)
CSS Level 2.1 (W3C Recommendation 07 June 2011)

Browser Support

Browser support for CSS properties can vary, particularly for newer or experimental features. Check current browser compatibility before using a property in production, especially when supporting older browsers.

Initial Value

CSS properties have an initial value that applies when the property has not been explicitly set. The initial value is different from the value inherited from a parent element and may vary between properties.

Inheritance

Some CSS properties inherit their computed value from their parent element by default, while others do not. The inherit, initial, unset, and revert keywords can also be used to control how a property gets its value.

Vendor Prefixes

Most modern CSS properties use the standard, unprefixed syntax. Vendor-prefixed properties such as -webkit- are mainly relevant to older browser versions or specific features and should only be used when required by your browser support targets.