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.

We have our default static layout here. The static position doesn’t need to be set as assumed.

There’s no effect if we attempt to apply properties such as top, bottom, left, orright to ...