What are the differences between relative, absolute, and fixed positioning?

The 'position' property is used for an element to specify its type of position method. Normally we have five different position values:

• static

• relative

• fixed

• absolute

• sticky

Today, I will introduce the three most common used values: relative, fixed and absolute.

relative

The definition of relative value is: an element with position: relative; is positioned relative to its normal position. In other words, when you move a position: relative; element, the change of position will rely on the original position of the element and not effect the layout of the page.

There is an example of position: relative; , its position is relative to the position of this paragraph, like a sticker on the notebook!

Here is the example code how I set the relative position:

        style {        
          .relative {
            position: relative;
            width: 300px;
            height: 60px;
            border: 3px solid #81e448;
            text-align: center;
            font-family: Lora;
            font-size: 15px;
            background-color: #f1f1f1;
          }
        } 

        <div class="relative">I have 'position: relative;'!</div>
      

fixed

The definition of fixed value is: an element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.

There is an example of position: fixed; on the right side of this web page: the div element with purple border sticks to the middle right of the page, just like a chewing gum on your device screen! No matter what you do, whether you change the size of the browser or scroll the page, it remains in that position!

Here is the example code how I set the fixed position:

        style {
          .fixed {
            position: fixed;
            top: 50%;
            right: 0;
            width: 300px;
            height: 30px;
            border: 3px solid #b3468e;
            text-align: center;
            font-family: Lora;
            font-size: 15px;
            background-color: #f1f1f1;
          }
        } 

        <div class="fixed">I have 'position: fixed;'!</div>
      

absolute

The definition of absolute value is: an element with position: absolute; is positioned relative to the nearest positioned ancestor. If an absolute positioned element has no positioned ancestors, it will use the html body nd move along with page scrolling.

There is an example of position: absolute; beside the list of position values, it is another chewing gum on this web page. It will stick there whether you scroll the page, but it will change the position little bit if you change the screen size. I set it, because it may cover other element in different screens.

Here is the example code how I set the absolute position:

        style {
          .fixed {
            position: absolute;
            top: 35%;
            right: 20%;
            width: 300px;
            height: 50px;
            border: 3px solid #342672;
            text-align: center;
            font-family: Lora;
            font-size: 15px;
            background-color: #f1f1f1;
          }
        } 

        <div class="absolute">I have 'position: absolute;'!</div>
      

23 JUNE 2023