Positioning (CSS)

Position property helps us to position any element in a web page , with the help of top,left,right and bottom the final position will decide.

There are Five types of position properties available in CSS.

statice
relative
absolute
fixed
sticky

HTML code, please uncomment all the comments

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Position</title>
    <style>
        .container{
            display: flex;
            width: 100%;
            height: 500px;
            background-color: #a09c9c;
        }
        .box{
            padding: 20px 20px;
            border: 2px solid black;
            border-radius: 4px;
            height: 20px;
            margin-right: 20px;
        }
        .three{
            background-color: yellow;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="box">One</div>
        <div class="box">Two</div>
        <div class="box three">Three</div>
        <div class="box">Four</div>
    </div>

     <!-- <div>lorem900</div> -->
</body>
</html>

Statice:- Statice is a default property in css positioning , it doesn't change anything in the page. All elements are positioned according to their normal flow.

Relative:- If we apply relative to any element then it will change its position from its actual position or original position or where it belongs. It calculates top,bottom,left,right from its actual area.

//add this code in style tag//

.three{
    position: relative;
    top: 20px;
    left: 40px;
}

Output

2022-11-22 (2).png

Absolute:- If we apply absolute to any element then it will change its position with respect to its parent, it will calculate right , left , bottom , top from its parent. It removes elements from normal document flow.

//add this code in style tag//

.three{
    position:absolute;
    top: 80px;
    left: 80px;

}

Output

2022-11-22 (3).png

Fixed:- The element is removed from the normal document flow, in the fixed position the element is always fixed at one position , mostly we use this property in the header nav bar , when we want to fix our nav bar at the top.

//add this code in style tag//

.three{
    position: fixed;
    top: 0;
    right: 0;
    /* left: 0; */
}

Output

2022-11-22 (4).png

Sticky:- Sticky is little different from fixed property , when we move our page then it is fixed on its position , and when it finds its actual position comes then it resides in its actual position.

//add this code in style tag//

.three{
    position: sticky;
    top: 10px;
}

Output

2022-11-22 (7).png

Positioning (CSS)

Table of contents

No headings in the article.