CSS position properties are used to define the position of elements on a webpage. By using the top, left, bottom, and right we can define the final position of elements.

What types of position properties are available?

• Static
• Relative
• Absolute
• Fixed
• Sticky

Whenever we are using the position property we are modifying the normal document flow. (i.e. we are taking out that element from its normal flow and its height & width will no longer affect the other elements)

Now let's discuss each of them -

Static

This is the default value for all elements. This is how all elements are laid out on the webpage. using position: static will not affect the position of that element. Let's look at a code example to see it in action. we have three boxes inside the container.

<div class="container">
    <div class="box box-1">BOX 1</div>
    <div class="box box-2">BOX 2</div>
    <div class="box box-3">BOX 3</div>
</div>

Let's give box-1 to position static.

.box-1 {
  position:static;
  top: 100px;
}

we can see there is no effect on box-1 to position static.

Relative

By using position relative the element remains in its original document flow unlike position absolute we can use top, bottom, left, and right to change the position of an element from its original position.

Let's remove position static to position absolute

.box-1 {
  position:relative;
  top: 20px;
  left: 40px;
}

Now we can see that the offset top & left values are getting applied to box-1. Also, the offset value of the top and left are applied relative to their original position.

Absolute

Absolute Positioning elements are positioned differently than the relatively positioned elements. They are positioned according to the nearest containing element with position, If it didn't find any parent element containing position then it will be positioned according to the body. when we use position absolute the element gets removed from the original document flow, As a result, the other elements will behave as if it never existed.

Let's give box-1 position absolute

.box-1 {
  position:absolute;
  top: 20px;
  left: 40px;
}

If you have noticed the box-1 nearest parent is the container and the container doesn't have a position defined so in this case, the box-1 tries to position itself based on body.

Let's give box-1 parent container to position relative

.box-1 {
  position:relative;
  top: 20px;
  left: 40px;
}

Result

we can see clearly now that box-1 positioned itself based on the parent container.

Fixed

Fixed position elements are the same as absolute, They are also removed from the original document flow. But unlike absolute position elements Fixed position elements are always positioned relative to the body element and also fixed position elements have no effect on scrolling they are always fixed at a constant position.

now let's give box-2 to position fixed

.box-2 {
  position:fixed;
  top: 20px;
  left: 40px;
}

Result

We can observe clearly that box-2 has fixed its position from the top & left relative to the body element. It also has no effect on scrolling.

Sticky

Position sticky acts like both relative & absolute i.e. it acts as a relative position until a certain scroll point then it acts as a fixed element. see below code example to understand it much better. let's give box-2 to position sticky.

.box-2 {
  position: sticky;
  top: 0px;
}

Result

Scroll the div and we can see box-2 behaves like position relative until a certain point, top:0, and then it behaves like a fixed element.