Hi To all my readers, I hope that you all are good at your place. In this article, I will explain the complex CSS topic "Position" simply with the help of code snippets. So let's get started. Position property helps us to define the type of positioning method used for an element. There are 5 types of position properties in CSS:-

1. Static
2. Relative
3. Fixed
4. Absolute
5. Sticky Now let's understand them one by one.

   1. Static

   It is the default property. This means that place the element where ever the HTML DOM said us to place it.

   HTML

   <div class="container">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
    <div class="box box4">4</div>
   </div>
   

   CSS

.box{
    border: 5px solid red;
    width: 150px;
    height:150px;
    margin: 2px;
    text-align: center;
    font-size: 100px;
}
.container{
    border: 5px solid #1f1f1f;
    background: aqua;
}

there are 4 boxes and no position property is used, the default property or static is triggered

In this, we can see that no position property is used and the HTML DOM placed the elements by itself.

2. Relative

If we define this property, It places the element relative to its original position. Here's the code example for your understanding.

HTML

<div class="container">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
    <div class="box box4">4</div>
</div>

CSS

.box{
    border: 5px solid red;
    width: 150px;
    height:150px;
    margin: 2px;
    text-align: center;
    font-size: 100px;
}
.box3{
    position: relative;
    top: 55px;
    left: 77px;
}
.container{
    border: 5px solid #1f1f1f;
    background: aqua;
}

Box number 3 was moved 55px from the top from its original position and similarly, it was moved 77px from the left from its original position. This creates a gap between the original position and the new position.

3. Fixed

As the name suggests that it fixes the element at a certain position. An example of this is the online chat support icon on any website. For better understanding here is the code example.

HTML

<div class="container">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
    <div class="box box4">4</div>
</div>

CSS

.box{
    border: 5px solid red;
    width: 150px;
    height:150px;
    margin: 2px;
    text-align: center;
    font-size: 100px;
}
.box3{
    position: fixed;
    top: 55px;
    right: 77px;
}
.container{
    height: 8000px;
    border: 5px solid #1f1f1f;
    background: aqua;
}

Here Box 3 is fixed on to a position. If we scroll the page everything on the page moves up or down as we move but the Box 3 remains in its position.

4. Absolute

The Position Absolute place the element with the reference of its parent. In our example on using the absolute property the box would be placed with the reference of the big box of colour aqua, if the big box is not present then it will be placed with the reference of HTML Body. Here is the example

HTML

<div class="container">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
    <div class="box box4">4</div>
</div>

CSS

.box{
    background-color: khaki;
    border: 5px solid red;
    width: 150px;
    height:150px;
    margin: 2px;
    text-align: center;
    font-size: 100px;
}
.box3{
    position: absolute;
    top: 55px;
    right: 77px;
}
.container{
    border: 5px solid #1f1f1f;
    background: aqua;
}

Here box 3 is placed with reference to the big box with the background colour aqua.

5. Sticky

The Position Sticky act like Fixed after we scroll the webpage. We can say that when we load the webpage then everything will be fine but as we scroll down then the element with a sticky position after a certain position act like a fixed position.

HTML

<div class="container">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
    <div class="box box4">4</div>
</div>

CSS

.box{
    background-color: khaki;
    border: 5px solid red;
    width: 150px;
    height:150px;
    margin: 2px;
    text-align: center;
    font-size: 100px;
}
.box3{
    position: sticky;
    top: 55px;
}
.container{
    height: 8000px;
    border: 5px solid #1f1f1f;
    background: aqua;
}

Initially

After certain scroll