position property CSS Reference

Definition and Usage

The position CSS property chooses alternative rules for positioning elements, designed to be useful for scripted animation effects.

• Initial static
• Applies to all elements
• Inherited no
• Media visual
• Computed Value as specified
• Animatable no
• Canonical order the unique non-ambiguous order defined by the formal grammar

A positioned element is an element whose computed position property is relative, absolute, or fixed.

An absolutely positioned element is an element whose computed position property is absolute or fixed.

The top, right, bottom, and left properties specify the position of positioned elements.

Syntax

Formal syntax: static | relative | absolute | sticky | fixed

position: static
position: relative
position: absolute
position: sticky
position: fixed
position: inherit

Values

static

Normal behavior.  The top, right, bottom, and left properties do not apply.

relative

Lay out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.

absolute

Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins.

sticky Experimental

The box's position is calculated according to the normal flow (this is called the position in normal flow). Then the box is offset relative to its flow root 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

Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and doesn't move when scrolled. When printing, position it at that fixed position on every page.

Examples

Relative positioning

To position an element relatively 20px from the top and left of its normal position, the following CSS is used.

#two { position: relative; top: 20px; left: 20px; }

Note how the other elements are displayed as if "Two" were in its normal position and taking up space.

Absolute positioning

Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.

In the example below, the blue ancestor div is positioned relative (so it becomes the nearest positioned ancestor) and box Two is positioned absolutely:

#ancestor { position: relative; background: #ddf; width: 500px; }
#two { position: absolute; top: 20px; left: 20px; }

If #ancestor had not been positioned relative, box Two would have appeared relative to the upper left corner of the page.

Fixed positioning

Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport. This is often used to create a floating element that stays in the same position even after scrolling the page. In the example below the "One" box is fixed 80px from the top of the page and 20px from the left:

#one { position: fixed; top: 80px; left: 20px }

When viewing the top of the page, the position box appears in the upper left, and after scrolling, it remains in the same place relative to the viewport

Compatibility

Desktop browsers

Mobile browsers