DEV Community

Sushanta Gupta
Sushanta Gupta

Posted on

Absolute Position vs Relative Position in CSS

When I started learning web development, some topics confused me. Among them, CSS positioning was one of them. I invested a certain amount of time for a clear idea about this topic. What I have understood, I will write in the following paras. I will not use any technical jargon and try to avoid complexity.

We find two kinds of positions in CSS-absolute and relative.
Relative Position:
Three Divs
Supposer, there are four divs, and these divs are denoted by 1, 2,3, and 4. The first, second, and third div is smaller, and the fourth is larger. Larger div surround the smaller div.
HTML markup is given below:

<!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>Document</title>
    <style>
        .innerDiv{
            border:1px solid black;
            height:60px;
            width:60px;
            display:inline-block;
        }
        .outerDiv{
            padding:2rem;
            width:300px;
            height:120px;
            border:1px solid red;
            display:inline-block;
        }     
    </style>
</head>
<body>
    <div class="outerDiv"> 
        <div id="" class="innerDiv"> Button 1 </div> <!--Number 1-->
        <div class="innerDiv"> Button 2 </div> <!--Number 2-->
        <div class="innerDiv"> Button 3 </div> <!--Number 3-->
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

We will get the following figure if we look at the browser.

How we get in the browser

Now we add id (#relative) to Number three div and add CSS inside the style tag.
Relative Position

<style>
        .innerDiv{
            border:1px solid black;
            height:60px;
            width:60px;
            display:inline-block;
        }
        .outerDiv{
            padding:2rem;
            width:300px;
            height:120px;
            border:1px solid red;
            display:inline-block;
        }   
        #relative{
            position:relative;
            top:60px;   
        }  
    </style>
</head>
<body>
    <div class="outerDiv"> 
        <div id="" class="innerDiv"> Button 1 </div> <!--Number 1-->
        <div class="innerDiv"> Button 2 </div> <!--Number 2-->
        <div id="relative "class="innerDiv"> Button 3 </div> <!--Number 3-->
    </div>
</body>
Enter fullscreen mode Exit fullscreen mode

In this case, the third div moves downward from its place. But the third div does not leave any space in the current position. Hence, other component does not change their location.

Relative Position of Third Div

Absolute Position
Now we add id (#absolute) to the third div and add CSS inside the style tag.

<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>Document</title>
    <style>
        .innerDiv{
            border:1px solid black;
            height:60px;
            width:60px;
            display:inline-block;
        }
        .outerDiv{
            width:300px;
            height:119px;
            display:inline-block;
            box-sizing: border-box;
        }
        #absolute{
            position:absolute;
            top:60px;   
        }
    </style>
</head>
<body>
    <div class="outerDiv"> 
        <div  class="innerDiv"> Button 1 </div>
        <div class="innerDiv"> Button 2 </div>
        <div id="absolute" class="innerDiv"> Button 3 </div> <!--Number 3-->
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

As the outerDiv has no position then, the third div uses the document body and moves along with the body.
Absolute Position and nearest unpositioned ancestor
If the outerDiv has a relative position, then the third div uses this div and moves in reference with this div.

Absolute Position
You can see a subtle difference between the above two images.

According to w3school, An element with position: absolute; is positioned relative to the nearest positioned ancestor.
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Top comments (2)

Collapse
 
thumbone profile image
Bernd Wechner

Just a heads up that this article appears incomplete and full of typing errors. You can keep it as an unpublished draft until ready to publish. It seems to have appeared on our feeds before it was ready.

Collapse
 
sushantagupta007 profile image
Sushanta Gupta

Is it complete now?