CSS POSITION: Absolute vs Relative

CSS POSITION: Absolute vs Relative

Difference between Absolute & Relative Position in CSS

Harsh Kumar
·Aug 14, 2022·

3 min read

Subscribe to my newsletter and never miss my upcoming articles

Table of contents

  • Introduction
  • Example
  • Output
  • Relative position
  • Output
  • Absolute Position
  • Example
  • Output
  • Output

As we know, we can use CSS to design our website. so in the website, there are multiple layers and containers through which we create the structure of any website. so for stylish layouts, we need to position the layers, containers, elements etc. for a great user experience on our website. for that, we use the CSS Position property to position the layers, containers & elements.

Introduction

CSS Position property have five values: relative absolute fixed static but in this article, we will focus on the absolute & relative positions.

The default position of any element is static means if you don't specify any position value then the default position of that element it'll be static i.e no specified position.

Example

🔸 Add HTML

<!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: absolute vs relative</title>
    <link rel="stylesheet" type="text/css" href="position.css">
</head>

<body>
    <div id="parent">
        <div id="one">Div 1</div>
        <div id="two">Div 2</div>
        <div id="three">Div 3</div>
    </div>
</body>

</html>

Output

CSS position

now add some CSS to it

#parent {
    border: 2px solid red;
    padding: 20px;
    width: 50%;
    color: white;
}

#one {
    width: 100px;
    height: 100px;
    background-color: green;
    display: inline-block;

}

#two {
    width: 100px;
    height: 100px;
    background-color: blue;
    display: inline-block;
}

#three {
    width: 100px;
    height: 100px;
    background-color: black;
    display: inline-block;
}

CSS position

Relative position

  • It means that the element is going to adjust/position from its previous normal position.
  • Element will get positioned according to the specified distance but no element can fill the empty space of the previous positioned element.

now add the specified position to the CSS of Div 2.

#two {
    width: 100px;
    height: 100px;
    background-color: blue;
    display: inline-block;
    position: relative;
    top: 50px;
    left: 50px;
}

Output

relative position

Absolute Position

  • When we specify position absolute it means that the element is going to adjust the position respective to the nearest positioned(either relative, absolute or fixed) parent element.
  • if there is no positioned parent element for that particular element then it will adjust the position respective to the body.

  • Case 2: If we will specify position absolute to any element & will not specify any of these positions: top bottom left right then that particular element will vacant their space at that position & other elements will occupy their position but that particular element will still at that position.

    Example

    🔸 Add HTML

<!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>Absolute position</title>
    <link rel="stylesheet" type="text/css" href="absolute.css">
</head>

<body>
    <div id="parent">
        <div id="one">Div 1</div>
        <div id="two">Div 2</div>
        <div id="three">Div 3</div>
    </div>
</body>

</html>

now add some CSS to it

#parent {
    border: 2px solid red;
    padding: 20px;
    width: 25%;
    color: white;
    margin: 100px;
    position: relative;
}

#one {
    width: 100px;
    height: 100px;
    background-color: green;
    display: inline-block;

}

#two {
    width: 100px;
    height: 100px;
    background-color: rgba(11, 11, 231, 0.976);
    display: inline-block;
    position: absolute;

}

#three {
    width: 100px;
    height: 100px;
    background-color: black;
    display: inline-block;
}

Output

absolute position

you can clearly see 👆 that Div3 has overlapped the position of Div2 due to vacant space created by Div2

Case 2: now, when we specify position with left, right, top, and bottom attributes then it will adjust the position according to positioned parent element or with the body when there is no positioned parent element.

position: absolute;
top: 0px;
left: 0px;

Output

absolute position

Thanks for reading❤⚡

ylliX - Online Advertising Network

Did you find this article valuable?

Support Harsh Kumar by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
 
Share this