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:

General Info