Day 97/98 of #100daysofcode CSS-Positioning

position: fixed

An element with position: fixed; is positioned relative to the viewport.

<li>Note:</li>

• The element is removed from the normal document flow,
• It always stays in the same place even if the page is scrolled
• It can be repositioned with the top, bottom, right or left props
• no space is created for the element in the page layout

Effect of top, bottom, left and right on position: fixed

Top, right, left and bottom affects the element in regards to its viewport.

let’s say an element has a top value of 20px, it will be positioned 20px from the top of the viewport

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

  body {
      padding: 0;
      margin: 0;
    }
    p {
      background: olivedrab;
      height: 50px;
      margin: 0;
    }
    div {
      height: 50px;
      width: 50px;
      background: peru;
    }
    p:nth-child(2) {
      background: blue;
    }
    .div1 {
      background: hotpink;
      position: fixed;
      top: 20px
    }

Thou div1 appears below the second paragraph, when assigned the top property,its values is counted starting from the viewport instead rather than the second paragraph.