In CSS Position Property arrarnge the elements in such a way so that we can determine the final location of elements in webpage.

Types of Positions:

Static:

It is by default property of the Static position. It always static as it was define. If You difine left,right,top and bottom arrtributes it will not work.

Code:

<style>

        .value{
            width: 50px;
            height: 50px;
            border: 2px solid yellow;
            background-color: rgb(73, 214, 45);


        }
        .three{
            position:static;
            left: 507px;
            right: 50px;
        }
    </style>

html:

<div class="container">
        <div class="value">1</div>
        <div class="value">2</div>
        <div class="value three">3</div>
        <div class="value">4</div>
        <div class="value">5</div>

        <p>lorem500</p>
</div>

Result:

In result we can see that we applied the "Static" attribute to the class name as "three" and define height , width but the value is not applied to the "3" no BOX.

Sticky: it is stick to the webpage when we define with top,right,bottom, left attributes. it works at time of scrolling side by side or top to bottom.

Code:

            position:sticky;
            left: 70px;
            right: 70px;
            top: 30px;
        }

Result:

As a result the box 3 is stick to the webpage at the 30px top after scroll top to down.

Fixed:

It is Fixed at the webpage as set with the attributes top,right,bottom, left.

Code:

.two{
                position: fixed;
                bottom: 10px;
                right: 10px;
            }

html:
<div class="container">
        <div class="value">1</div>
        <div class="value two">2</div>
        <div class="value three">3</div>
        <div class="value">4</div>
        <div class="value">5</div>
</div>

Result:

As a result the box 2 is fixed at the bottom conner in webpage.

Relative:

The position of an element is remain in webpage. After attributes top,right,bottom, left applied then the define value of attributes calculate from the original position and the previous position remain same. so here the children is box2 and parent is own previous position.

Code:

                position: relative;
                left: 100px;
            }

Result:

As a result the box 2 is moved left 100px but other boxes are not occupied the previous box 2 space.

Absoulte

After use the Absoulte position the element is child of the whole webpage and the attributes are define the position of the element.

Code:

                position: absolute;
                left: 100px;
            }

Result:

As a result the previous postion of box 2 is occupied by the other boxes and it is define by the attributes.

Thank you for reading my article.