CSS Layout - The position Property

The position property in CSS is used to control the positioning of an element within its containing element. It has several possible values, each influencing how the element is placed on the page. The most common values for the position property are:

The position Property

There are five different position values:

static
relative
fixed
absolute
sticky

Static Position Property

This is the default value. Elements with position: static; are positioned in the normal flow of the document. The top,right, bottom, and left properties have no effect when position is set to static.

Example

.static {
  position:  static;
  border:  3px solid pink;
}

You can click on above box to edit the code and run again.

Output

This div element has position: static;

Relative Position Property

Elements with position: relative; are positioned relative to their normal position in the document flow. You can then use the top, right, bottom, and left properties to offset the element from its normal position.

Example

.relative {
  position:  relative;
  left:  20px;
  top:  10px;
  border:  3px solid pink;
}

You can click on above box to edit the code and run again.

Output

This div element has position: relative;

Absolute Position Property

Elements with position: absolute; are removed from the normal document flow and positioned relative to the nearest positioned ancestor (an ancestor that is not position: static;). If no positioned ancestor is found, it's positioned relative to the initial containing block (usually the viewport).

Example

.relative1 {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid pink;
} 

.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid pink;
}

You can click on above box to edit the code and run again.

Output

This <div> element has position: relative;

This <div> element has position: absolute;

Fixed Position Property

Elements with position: fixed; are removed from the normal document flow and are positioned relative to the viewport. They remain in the same position even when the page is scrolled.

Example

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid pink;
}

You can click on above box to edit the code and run again.

Output

Sticky Position Property

Elements with position: sticky; are a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified point during scrolling, at which point it is treated as fixed.

Example

.sticky {
   position:  -webkit-sticky;  /* Safari */
   position:  sticky;
   top:  0;
   background-color:  #cae8ca;
   border:  3px solid pink;
}

You can click on above box to edit the code and run again.

Output

Try to scroll inside this frame to understand how sticky positioning works.

I am sticky!

In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.

Scroll back up to remove the stickyness.

Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.

Scroll back up to remove the stickyness.

In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.