Hi, yesterday my lappy abruptly went off on me so I could not upload. I had to pause with SCSS to treat some few other css properties starting with psitioning.

POSITIONING

The position CSS property sets how an element is positioned in a document.

Positioning values

1. relative
2. sticky
3. fixed
4. absolute
5. static (default)

position: relative;

The element is positioned according to the normal flow of the document.

The top and bottom properties specify the vertical offset from its normal position; the left and right properties specify the horizontal offset.

  <p>Hello, Mr positioner</p>
  <div class="div1">div 1</div>
  <div class="div2">div 2</div>

  p {
      background: olivedrab;
      margin: 0;
    }
    .div1 {
      height: 50px;
      width: 50px;
      background: coral;
      position: relative;
      top: 150px
    }
    .div2 {
      height: 50px;
      width: 50px;
      background: peru;
    }

But when

   position: relative; /*is commented out*/ 

 p {
      background: olivedrab;
      margin: 0;
    }
    .div1 {
      height: 50px;
      width: 50px;
      background: coral;
      /* position: relative; */
      top: 150px  /*this wil not take effect */
    }
    .div2 {
      height: 50px;
      width: 50px;
      background: peru;
    }

The result will be

This is because the top property will become functionless when the property "position" is absent

From my own understanding, relative positioning allows the the page elements to stay in its normal position regarding the existence of the element's(with position relative) default position, and also allows the element in question to be reposition from its default position using the top, left, right and bottom properties which will not affect the the other elements