CSS Position

Hello! To all my readers, I hope that you all guys are fine. In this article, I will try to explain the complex CSS topic "Position". So, with that's it let's get started.
The CSS position property is an awesome property in CSS. It helps us to create new design possibilities but can be difficult to understand. After reading this, I am pretty sure that you will be capable of using position property and have some good ideas about the same.

There are 5 types of position properties in CSS:-

1. position:static
2. position:relative
3. position:absolute
4. position:fixed
5. position:sticky

So, let us understand them one by one.

1. position:static

The static is the default value and no one uses this property, yet it is a very useful one. This property simply means that it will follow the normal flow of the web document in our HTML DOM.
HTML

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

CSS

.container {
    background-color: #2929e6;
    border: 5px solid #000;
    width: 500px;
}

.box {
    color: #fff;
    border: 2px solid #ff0808;
    margin: 10px;
    text-align: center;
    font-size: 30px;
    width: 100px;
}

.box2 {
    position: static;
    top: 50px;
    left: 107px;
}

Here, we have 3 boxes and we use the position:static property on .box2 class.

In the above image, we cannot see any changes. Hence, in position:static property our HTML DOM placed the elements by itself.

2. position:relative

It is a magic keyword. By using the relative property, you now have the control to position via properties like z-index, left, right, top, and bottom.
HTML

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

CSS

.container {
    background-color: #2929e6;
    border: 5px solid #000;
    width: 500px;
}

.box {
    color: #fff;
    border: 2px solid #ff0808;
    margin: 10px;
    text-align: center;
    font-size: 30px;
    width: 100px;
}

.box2 {
    position: relative;
}

Suppose we have 3 boxes and if we just give position:relative there will not be any change just like position:static as below.

But if we use properties like top, bottom, left, and right then you can see the magic:
CSS

.container {
    background-color: #2929e6;
    border: 5px solid #000;
    width: 500px;
}

.box {
    color: #fff;
    border: 2px solid #ff0808;
    margin: 10px;
    text-align: center;
    font-size: 30px;
    width: 100px;
}

.box2 {
    position: relative;
    top: 50px;
    left: 107px;
}

3. position:absolute

The absolute property will completely remove the element from the normal flow of the document.
You can position this element anywhere with respect to its relative parent.
HTML

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

CSS

.container {
    background-color: #2929e6;
    border: 5px solid #000;
    width: 500px;
}

.box {
    color: #fff;
    border: 2px solid #ff0808;
    margin: 10px;
    text-align: center;
    font-size: 30px;
    width: 100px;
}

.box2 {
    position: absolute;
    top: 50px;
    left: 107px;
}

You can position this anywhere according to your choice with properties like top, bottom, left, and right.

4. position:fixed

The fixed position is a bit like the absolute position in that it removes the element from the document flow, but fixed position elements are always positioned relative to the screen no matter what position their parent elements are.
HTML

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

CSS

.container {
    background-color: #2929e6;
    border: 5px solid #000;
    width: 500px;
    height: 8000px;
}

.box {
    color: #fff;
    border: 2px solid #ff0808;
    margin: 10px;
    text-align: center;
    font-size: 30px;
    width: 100px;
}

.box2 {
    position: fixed;
    top: 50px;
    left: 107px;
}

Initially

After certain scroll As you call see above, box2 is fixed its position.

5. position:sticky

This sticky property is to fix something until the scrolls to a point where the element hits the top, bottom, left, or right value specified.

Initially

After certain scroll

Conclusion

We have discussed various positioning in CSS.
There are several properties available for positioning but hopefully, you now know when to make use of each.

I hope you have found this useful. If so, be sure to share and comment.