Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Difference between relative , absolute and fixed position in CSS

  • Difficulty Level : Basic
  • Last Updated : 23 Jul, 2021

Relative Position: Setting the top, right, bottom, and left properties of an element with position: relative; property will cause it to adjust from its normal position. The other objects or elements will not fill the gap.

Syntax:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

position: relative;

Absolute Position: An element with position: absolute; will cause it to adjust its position with respect to its parent. If no parent is present, then it uses the document body as parent.

position: absolute;

Fixed Position:



Position: fixed; property applied to an element will cause it to always stay in the same place even if the page is scrolled. To position the element we use top, right, bottom, left properties.

Syntax:

position: fixed;

Below example illustrates the differences between Relative Position and Absolute Position.

Relative Position:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        div.relative {
            position: relative;
            left: 50px;
            border: 3px solid #73AD21;
        }
    </style>
</head>
 
<body>
    <h1>position: relative;</h1>
 
    <div class="relative">
        This element has position:relative;
    </div>
</body>
 
</html>

Output:

Absolute Position:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        div.relative {
            position: relative;
            width: 400px;
            height: 200px;
            border: 3px solid #73AD21;
        }
         
        div.absolute {
            position: absolute;
            top: 80px;
            right: 80px;
            width: 200px;
            height: 100px;
            border: 3px solid #73AD21;
        }
    </style>
</head>
 
<body>
    <h1>position: absolute;</h1>
 
    <div class="relative">
        This element has position: relative;
        <div class="absolute">
            This element has position: absolute;
        </div>
    </div>
</body>
 
</html>

Output:

Fixed Position:

HTML




<!DOCTYPE html>
<html>
 
<head>
  <style>
    div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}
    div.absolute {
      position: absolute;
      top: 150px;
      right: 80;
      width: 200px;
      height: 100px;
      border: 3px solid #73AD21;
    }
  </style>
</head>
 
<body>
 
  <h1>position: absolute;</h1>
 
    <h2>position: fixed;</h2>
    <div class="absolute">This element has position: absolute;</div>
  </div>
 
</body>
 
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!