Difference Between Relative And Absolute Position In CSS.

The position property is among the most challenging concepts to grasp in CSS yet it is used very frequently especially arranging content blocks on a web page. A lot of confusion comes from differentiating CSS position property attributes of relative, absolute, fixed and sticky.

In this tutorial am going to explain the difference between position attributes of relative and absolute. You can also check out my other tutorial for the difference between position fixed and sticky.

CSS position: relative;

An element with position attribute set as relative means that it is “relative to itself”. Therefore if no other positioning properties like top, left, bottom or right are defined for this element, it will remain exactly as it would be if you left it as position static which is the default position attribute.

In case you set the top, right, bottom and left properties of an element with position: relative; the element is adjusted from its normal position depending on the value of these properties but other elements on the page will not fill the gap left.

The z-index property can be used for an element with position: relative; but does not work with a statically positioned element.

CSS position: absolute;

An element with position: absolute; causes it to adjust its position with respect to its parent. If no parent is present, then it uses the document body as parent meaning it will be placed relative to the page itself.

A major concept to remember is that absolutely positioned elements are removed from the normal flow of elements on a page.

I will use the code below to demonstrate the difference between position relative and absolute.

<!DOCTYPE html>
<html>
 
<head>
    <style>
        div.container{
            width: 60%;
            height: 500px;
            background: #FCF0D7;
        }
        div.relative {
            position: relative;
            width: 600px;
            height: 250px;
            left: 20px;
            border: 3px solid #A3E5B0;
            background: #CBFECD;
        }
         
        div.absolute {
            position: absolute;
            top: 80px;
            right: 80px;
            width: 250px;
            height: 80px;
            border: 3px solid #3598FC;
            background: #74E1E1;
        }
        h1,h2{
            font-size: 20px;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <div class="container">
    <h1>Absolute and Relative positioning</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis. Est ultricies integer quis auctor elit sed vulputate mi sit.</p>
 
    <div class="relative">
        <h2>Element with position: relative;</h2>
        <div class="absolute">
            <h2>Element with position: absolute;</h2>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis. Est ultricies integer quis auctor elit sed vulputate mi sit.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis. Est ultricies integer quis auctor elit sed vulputate mi sit.</p>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis. Est ultricies integer quis auctor elit sed vulputate mi sit.</p>
   </div>
</body>
 
</html>

When rendered in a browser, the output will appear as shown below.

Difference between css position relative and absolute

The element with position absolute is a child of the relatively positioned element. Properties of top, bottom, right and left enable us to position the element with position absolute relative to the element with position relative.