Relative :- Its all about setting the position of an element to top,right,bottom,left from original position;

Absolute :- Absolute will adjust its position according to its parent.If no parent it adjusts according to main page or document body.

<!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>Positions-absolute & relative</title>
    <style>
        .box1{
            border: 2px solid black;
            padding:2rem;
            width:2rem;
            position: relative;
            right:32rem;
            color: brown;
        }

        .box2{
            border: 2px solid red;
            padding:2rem;
            width:2rem;
            position: absolute;
            color: rgb(165, 42, 142);
        }

        .row{
            display:flex;
            flex-direction: row;
            justify-content: center;
            gap: 12px;
            border:2px solid green;
            font-size: 19px;
        }

    </style>
</head>
<body>
    <div class="row">Iam parent of two children 
    <div class="box1">Iam Relative iam moving my postion from original to left bcos my relative position to right is 32rem.
    </div>
    <div class="box2">Iam Absolute iam covering my parent bcos my position adjusted according to my parent</div>
    </div>

</body>
</html>

Difference Between absolute and relative in positions

Table of contents

Subscribe to my newsletter

chakram

chakram