Skip to main content

CSS position Property – How to Define an Element's Position

position defines how you want browsers to place the selected HTML element.

note

We use the top, bottom, right, and left CSS properties to specify the precise location of the positioned element.

The position property accepts the following values:

  • static
  • relative
  • absolute
  • fixed
  • sticky

Let's discuss the five values below.

What Is position: static in CSS?​

static is position's default value. It positions the selected element following the normal layout flow.

note

The top, bottom, left, right, and z-index CSS properties do not affect static elements.

Here's an example:

section {
  background-color: orange;
  margin: 50px;
}

div {
  border: 1px solid black;
  background-color: purple;
  color: white;
  padding: 20px;
  border-radius: 5px;
}

.item3 {
  background-color: DarkGreen;
  position: static;
}

Try it on StackBlitz

The static value in the snippet above tells browsers to position item3 statically according to the document's normal layout flow.

React Explained Clearly Book Now Available at Amazon

What Is position: relative in CSS?​

relative positions the selected element relative to its regular position in the document's normal layout flow.

In other words, suppose you have placed an element according to the page's normal flow. The position: relative declaration along with the CSS top, right, bottom, and left properties allow you to offset the element relative to its initial position.

Here's an example:

section {
  background-color: orange;
  margin: 50px;
}

div {
  border: 1px solid black;
  background-color: purple;
  color: white;
  padding: 20px;
  border-radius: 5px;
}

.item3 {
  background-color: DarkGreen;
  position: relative;
  top: 25px;
  left: 40px;
}

Try it on StackBlitz

We used the position property to offset item3 relative to its initial location in the document's normal layout flow.

In other words, we offset item3 25px away from its normal top position and 40px from its initial left location.

note
  • A position: relative declaration disregards other items on the page. Therefore, you can use it alongside a non-auto z-index to create a new stacking context.
  • Relative positioning does not remove an element from the normal layout flow. Therefore, other elements around it will behave as if the relatively positioned element is in its default position.

What Is position: absolute in CSS?​

absolute does the following:

  1. It removes the selected element from the document's normal layout flow.
  2. It positions the removed element absolutely to the specified edge of its container (or the HTML document).
note

We use the CSS top, right, bottom, and left properties to specify the precise location of the absolutely positioned element.

Here's an example:

section {
  background-color: orange;
  margin: 50px;
}

div {
  border: 1px solid black;
  background-color: purple;
  color: white;
  padding: 20px;
  border-radius: 5px;
}

.item3 {
  background-color: DarkGreen;
  position: absolute;
  top: 25px;
  left: 40px;
}

Try it on StackBlitz

We used the position property to offset item3 absolutely 25px away from the HTML document's top edge and 40px from its left side.

Suppose an absolutely positioned element's parent has a static position property. In that case, browsers will offset the absolute item from the HTML document's edges.

info

Browsers will automatically use the position: static declaration for elements without a position property.

For instance, the snippet above offsets item3 from the HTML document's edges because its container's (the <section> element) position property is static.

If you prefer to offset item3 from its container's edges, specify a non-static position property for the <section> element.

Here's an example:

section {
  background-color: orange;
  margin: 50px;
  position: relative;
}

div {
  border: 1px solid black;
  background-color: purple;
  color: white;
  padding: 20px;
  border-radius: 5px;
}

.item3 {
  background-color: DarkGreen;
  position: absolute;
  top: 25px;
  left: 40px;
}

Try it on StackBlitz

We used the position property to offset item3 absolutely 25px away from the <section>'s top edge and 40px from its left side.

tip
  • Use the CSS z-index property to specify your overlapping elements' stacking order.
  • The z-index property only affects non-statically positioned elements.
  • Non-static elements are elements whose position property's value is not static.

What Is position: fixed in CSS?​

fixed does the following:

  1. It removes the selected element from the document's normal layout flow.
  2. It fixes the removed element to the specified region of the viewport.

In other words, browsers will fix a fixed positioned element to the specified area of the viewport. Therefore, the item will remain in the same place even when users scroll the page.

note

We use the CSS top, right, bottom, and left properties to specify the precise location of the fixed positioned element.

Here's an example:

section {
  background-color: orange;
  margin: 50px;
}

div {
  border: 1px solid black;
  background-color: purple;
  color: white;
  padding: 20px;
  border-radius: 5px;
}

.item3 {
  background-color: DarkGreen;
  position: fixed;
  bottom: 25px;
  right: 40px;
}

Try it on StackBlitz

We used the position property to fix item3 to the viewport's bottom-right region.

Rakuten Kobo US

What Is position: sticky in CSS?​

sticky sticks the selected element to the viewport once it reaches the specified threshold.

Here's an example:

section {
  background-color: orange;
  margin: 50px;
}

div {
  border: 1px solid black;
  background-color: purple;
  color: white;
  padding: 20px;
  border-radius: 5px;
}

.item3 {
  background-color: DarkGreen;
  position: sticky;
  top: 25px;
}

Try it on StackBlitz

We used the position property to stick item3 to the viewport once users scroll it 25px away from the page's top edge.

Note this:

An element's sticky behavior ends once you've scrolled to its container's bottom edge. For instance, consider this example:

section {
  background-color: orange;
  margin: 50px;
  padding: 13px;
}

div {
  border: 1px solid black;
  background-color: purple;
  color: white;
  padding: 20px;
  border-radius: 5px;
  margin: 10px;
}

.sticky-item {
  background-color: DarkGreen;
  position: sticky;
  top: 25px;
}

Try it on StackBlitz

In the snippet above, each <section>'s sticky-item stops sticking to the viewport once users scroll to the container's bottom edge.

note
  • A sticky element is a hybrid of relative and fixed position values. In other words, a sticky item acts relatively until users scroll to the specified threshold; then it gets fixed to the viewport.
  • Sticky positioning does not remove an element from the normal layout flow. Therefore, other elements around it will behave as if the sticky element is in its default position.

Overview​

This article discussed what a CSS position property is. We also discussed its values.

Tags:
Last updated on by Oluwatobi Sofela