CSS

CSS(Cascading Style sheets) as its name suggests, it is a Style sheet language. Basically, we use HTML to write all the code to put the data needed for making our required webpage. But in order to style the webpage we use CSS along with HTML. This designs our webpage and makes it more systematic. There are many ways to style using CSS. Now let us look at how Position Property play a vital role in styling the webpages.

Position Property CSS

By assigning the position property, we can locate the elements in the document at various positions as per the given property. There are various types of positions.

Types of Positions :CSS

Static
Relative
Absolute
Fixed
Sticky

Let us know about them in detail....

Position: Sticky

When an element is given Position: sticky ,the element remains in its assigned position. It does not alter its position even if we scroll down the webpage. Let us look at a code snippet to understand more about it.

HTML:

<body>
    <div class="cartoon">
        <div class="sticky"><h1>Doraemon Cartoon</h1></div>
        <div class="doraemon"><img src="./static.png" alt="doremon"></div>
        <div class="nobita"><img src="./nobita r.jpg" alt="nobita"></div>
        <div class="suneo"><img src="./suneo.jpg" alt="suneo"></div>
        <div class="suzuka"><img src="./suzuka.jpg" alt="suzuka"></div>
        <div class="geon"><img src="./geon.jpg" alt="geon"></div>

    </div>
  </body>

CSS:

* {
    margin: 0;
    padding: 0;
}
body {
    background-color: rgb(127, 255, 238);
}
.sticky {
    position: -webkit-sticky;
    position: sticky;   
    background-color: rgba(218, 201, 17, 0.502);
    padding: 15px 0; 
    top: 0; 
    left: 400px;
}
.sticky h1 {
    color: #fff;
    margin-left: 480px;
    text-transform: uppercase;
}

RESULT:

See the Pen Position: Sticky by Shravya (@Shra03) on CodePen. " data-card-controls="0" data-card-theme="light">

Here,the heading sticks to its position even if we scroll down the webpage. The image present in the class:doraemon is set to sticky position now.

Position: Relative

If an element's position is set to relative, then it will offset itself from its original position. The space assigned for the element will remain same. The relative position property can be applicable only if we add at least one of the given top, bottom, left, right properties.

This code helps us to understand it better:

HTML:

<div class="cartoon">
        <div class="sticky"><h1>Doraemon Cartoon</h1></div>
        <div class="doraemon"><img src="./static.png" alt="doraemon"></div>
        <div class="nobita"><img src="./nobita r.jpg" alt="nobita"></div>
        <div class="suneo"><img src="./suneo.jpg" alt="suneo"></div>
        <div class="suzuka"><img src="./suzuka.jpg" alt="suzuka"></div>
        <div class="geon"><img src="./geon.jpg" alt="geon"></div>

    </div>

CSS:

body {
    background-color: rgb(127, 255, 238);
}
.sticky {  
    background-color: rgba(218, 201, 17, 0.502);
    padding: 5px 0; 
    top: 0; 

} 
.sticky h1 {
    color: #fff;
    margin-left: 480px;
    text-transform: uppercase;
} 
.doraemon {
    position: relative;

    left: 600px;
}

RESULT:

See the Pen POSITION:RELATIVE (CSS) by Shravya (@Shra03) on CodePen. " data-card-controls="0" data-card-theme="light">

Position: Absolute

If an element's position is set to Absolute, then element shifts to its new position based on the values given using top, bottom, left, right properties.

Let us look at the code for that :

HTML:

 <div class="cartoon">
        <div class="sticky"><h1>Doraemon Cartoon</h1></div>
        <div class="doraemon"><img src="./static.png" alt="doraemon"></div>
        <div class="nobita"><img src="./nobita r.jpg" alt="nobita"></div>
        <div class="suneo"><img src="./suneo.jpg" alt="suneo"></div>
        <div class="suzuka"><img src="./suzuka.jpg" alt="suzuka"></div>
        <div class="geon"><img src="./geon.jpg" alt="geon"></div>

    </div>

CSS:

body {
    background-color: rgb(127, 255, 238);
}
.sticky {  
    background-color: rgba(218, 201, 17, 0.502);
    padding: 5px 0; 
    top: 0; 

} 
.sticky h1 {
    color: #fff;
    margin-left: 480px;
    text-transform: uppercase;
} 
.doraemon {
    position: relative;

    left: 600px;
} 
.nobita {
    position: absolute;
    right: 120px;
}

RESULT:

See the Pen POSITION:Absolute (CSS) by Shravya (@Shra03) on CodePen. " data-card-controls="0" data-card-theme="light">

Now we can see that the original space assigned to the element is not present. The image present in the class:nobita is set to its absolute position now.

Position:Fixed

If an element's position is set to Position:fixed and given any of the top,bottom,left,right properties ,then the element will move to the assigned place and then it will be fixed there. It does not alter its position even if we change the position of any other element and the original space given to the element in the document will be removed. Code: HTML:

 <div class="cartoon">
        <div class="sticky"><h1>Doraemon Cartoon</h1></div>
        <div class="doraemon"><img src="./static.png" alt="doraemon"></div>
        <div class="nobita"><img src="./nobita r.jpg" alt="nobita"></div>
        <div class="suneo"><img src="./suneo.jpg" alt="suneo"></div>
        <div class="suzuka"><img src="./suzuka.jpg" alt="suzuka"></div>
        <div class="geon"><img src="./geon.jpg" alt="geon"></div>

    </div>

CSS:

body {
    background-color: rgb(127, 255, 238);
}
.sticky {  
    background-color: rgba(218, 201, 17, 0.502);
    padding: 5px 0; 
    top: 0; 

} 
.sticky h1 {
    color: #fff;
    margin-left: 480px;
    text-transform: uppercase;
} 
.doraemon {
    position: relative;

    left: 600px;
} 
.nobita {
    position: absolute;
    right: 120px;

}
.suzuka {
    position: fixed;
    right:200px;
    bottom: 0;
}

RESULT:

See the Pen POSTION:Fixed (CSS) by Shravya (@Shra03) on CodePen. " data-card-controls="0" data-card-theme="light">

The image present in the class:suzuka is fixed now.

Position: Static

An element's position is always set to static,right after writing the code.It is not any compulsion to mention the code as Position: Static

The top,bottom,left,right properties have no effect. This below code helps us to understand it better.

HTML:

 <div class="cartoon">
        <div class="sticky"><h1>Doraemon Cartoon</h1></div>
        <div class="doraemon"><img src="./static.png" alt="doraemon"></div>
        <div class="nobita"><img src="./nobita r.jpg" alt="nobita"></div>
        <div class="suneo"><img src="./suneo.jpg" alt="suneo"></div>
        <div class="suzuka"><img src="./suzuka.jpg" alt="suzuka"></div>
        <div class="geon"><img src="./geon.jpg" alt="geon"></div>

    </div>

CSS:

body {
    background-color: rgb(127, 255, 238);
}
.sticky {  
    background-color: rgba(218, 201, 17, 0.502);
    padding: 5px 0; 
    top: 0; 

} 
.sticky h1 {
    color: #fff;
    margin-left: 480px;
    text-transform: uppercase;
} 
.doraemon {
    position: relative;

    left: 600px;
} 
.nobita {
    position: absolute;
    right: 120px;

}
.suzuka {
    position: fixed;
    right:200px;
    bottom: 0;
}
.geon{
    position: static;
    left: 50px;
}

RESULT:

See the Pen POSITION:Static(CSS) by Shravya (@Shra03) on CodePen. " data-card-controls="0" data-card-theme="light">

This looks same as the previous webpage. But here ,we can observe that for the class:"geon" we gave the position as static but then defined the left property as 50px. As said earlier ,the static position will not have any effect by the left,right,top,bottom,z-index properties. It will be present at its original position only.

For the class="suneo" we haven't defined any position property,but by default its position is set to static.

CONCLUSION

These are the 5 CSS Position Properties.

Thank you for reading this article. I hope it helped you in some way.

CSS-Position Property

Detailed guide on CSS-Position Property with code examples.

Table of contents

CSS

Position Property CSS

Types of Positions :CSS

Position: Sticky

Position: Relative

Position: Absolute

Position:Fixed

Position: Static

CONCLUSION