Positioning

The position property

In CSS, we can define the location of an element using the position property.

For example:

.element {
  position: relative;
  top: 10px;
}

In the code above, our element’s position is moved down 10px from the top (relative to its original position in the document).

The position property can have one of five values:

• static
• relative
• absolute
• fixed
• sticky

Let’s see each in action!

The position values

The static value

Every element has a static position by default. Statically positioned elements are displayed in the normal page flow.