Absolute Position vs Relative Position in CSS
Tags: css
Published: 2022-02-21 01:59:16

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cjy9fc273rfya5h4avrc.png)
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>
```
We will get the following figure if we look at the browser. 

![How we get in the browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/man62bbmijg0bmge6j24.PNG)

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>
```
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lz4xx6pyimg5f0chclgi.PNG)

**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>
```
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dm8bl86izqshbwh0tbb0.PNG)
If the outerDiv has a relative position, then the third div uses this div and moves in reference with this div. 


![Absolute Position](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4dtkh51bx8vpxkckm24.PNG)
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. ](https://www.w3schools.com/css/css_positioning.asp)