CSS position Property

CSS position property specifies how and where an element should be placed in the layout. This property has several values which help us to place an element anywhere in the document.

The position property takes help of the top, bottom, left and right properties to set the position of the element in the layout.

The position property accepts below 5 values:

  • relative
  • absolute
  • fixed
  • sticky
  • static

Let’s discuss each value one by one in detail.

The position relative

An element having position: relative; is positioned relative to its original(default) position. Refer to the example below:

Example:

div{
  position: relative;
  top: 50px;
  left: 50px;
}

The position absolute

An element having position: absolute; is positioned relative to the nearest positioned ancestor. An element is called a positioned element if it has its position other than static. If the element has no positioned ancestor, it is positioned relative to the viewport itself.

In the example below, the <div> element has no positioned ancestor. Therefore, it is positioned relative to the viewport itself. Try it out:

Example:

div{
  position: absolute;
  top: 50px;
  left: 50px;
}

The position fixed

An element having position: fixed; is always positioned relative to the viewport. Such elements always stay on a fixed position and do not scroll along with the rest of the page. Refer to the example below:

Example:

div{
  position: fixed;
  top: 50px;
  left: 50px;
}

The position sticky

An element having position: sticky; toggles between the relative and fixed positioning, depending on the scroll position. Its position is considered relative until you scroll the webpage to a certain point. Once this point is met, the element behaves like a fixed positioned element and it becomes sticky at that position even if you scroll the webpage.

The position: sticky; is generally used to make sticky headers in the website designing. Refer to the example below:

Example:

div{
  position: sticky;
  top: 50px;
  left: 50px;
}

The position static

This is the default value. An element having position: static; is positioned according to the normal flow of the layout. Such elements are not affected by the top, left, right, or bottom properties. Refer to the example below:

Example:

div{
  position: static;
  top: 50px;
  left: 50px;
}

CSS Syntax

The position property has the below syntax:

position: static|relative|absolute|fixed|sticky|initial|inherit;

Property Values

The position property accepts the following values:

staticThis is the default value. Elements are positioned according to the normal flow of the layout. The left, right, top and bottom property has no effect on such elements.
relativeThe element is positioned relative to its original(default) position.
absoluteThe element is positioned relative to its nearest positioned ancestor. If no ancestor is positioned, it is positioned relative to the viewport itself.
fixedThe element is positioned relative to the viewport. The element becomes fixed at the specified position and does not scroll along with the webpage.
stickyThe element toggles between the position relative and fixed based on the scroll position. The element behaves as a relatively positioned element until you scroll the webpage to a certain point. Once that point is reached it behaves like a fixed positioned element and becomes sticky at that point and does not scroll along with the webpage.
initialSets the position property to its default value(static).
inheritInherits the position property from its parent element.

General Info

Default Valuestatic
InheritedNo
JavaScript Usageelement.style.position = “relative”;