The position property in CSS helps us to tell the position of an HTML element.

There are five types of positions that we can define in CSS:-

static
relative
absolute
fixed
sticky

static

It is the default position of HTML elements. They are not affected by the top, left, bottom, and right properties.

<style>
        .box{
            display: inline-block;
            border:2px solid red;
            width:150px;
            height:150px;
            margin:2px;
        }
        #box1{
            position:static;
        }
    </style>
</head>
<body>
    <div class="box" id="box1">1</div>
    <div class="box" id="box2">2</div>
    <div class="box" id="box3">3</div>
    <div class="box" id="box4">4</div>
</body>

Screenshot (72).png

relative

If we apply this property to an HTML element then it will move relative to its normal position. Unlike static it is affected by top, left, bottom, and right properties.

<style>
        .box{
            display: inline-block;
            border:2px solid red;
            width:150px;
            height:150px;
            margin:2px;
        }
        #box3{
            position:relative;
            top:34px;
            left: 34px;
        }
    </style>
</head>
<body>
    <div class="box" id="box1">1</div>
    <div class="box" id="box2">2</div>
    <div class="box" id="box3">3</div>
    <div class="box" id="box4">4</div>
</body>

Screenshot (73).png

absolute

If we apply this property to an HTML element then it will move according to the position of its parent elements.

<style>
        .container{
            border: 2px solid black;
            background-color:rgb(204, 83, 83);
        }
        .box{
            display: inline-block;
            border:2px solid black;
            width:150px;
            height:150px;
            margin:2px;
        }
        #box3{
            position:absolute;
            top:34px;
            left: 34px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box" id="box1">1</div>

        <div class="box" id="box2">2</div>

        <div class="box" id="box3">3</div>

        <div class="box" id="box4">4</div>
    </div>
</body>

Where container class is the parent of box3 id. Screenshot (74).png

fixed

When we apply fixed to an element it will remain stuck in that particular place no matter how much we scroll it.

    <style>
        .container{
            border: 2px solid black;
            background-color:rgb(204, 83, 83);
            height:3440px;
        }
        .box{
            display: inline-block;
            border:2px solid black;
            width:150px;
            height:150px;
            margin:2px;
        }
        #box3{
            position:fixed;
            right:4px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box" id="box1">1</div>

        <div class="box" id="box2">2</div>

        <div class="box" id="box3">3</div>

        <div class="box" id="box4">4</div>
    </div>
</body>

ezgif.com-gif-maker.gif

sticky

It's a hybrid of both relative and fixed positions. An element with position: sticky will just sit there until a given position offset is met.

<style>
        .container{
            border: 2px solid black;
            background-color:rgb(204, 83, 83);
            height:3440px;
        }
        .box{
            display: inline-block;
            border:2px solid black;
            width:150px;
            height:150px;
            margin:2px;
        }
        #box3{
            position:sticky;
            top:3px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box" id="box1">1</div>

        <div class="box" id="box2">2</div>

        <div class="box" id="box3">3</div>

        <div class="box" id="box4">4</div>
    </div>
</body>

ezgif.com-gif-maker (1).gif

Thank you for reading :).

Tanay's Blog