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

Relative positioning

• Is like the static positioning value but left/right/top/bottom will work.
• So using relative positioning unlocks CSS layout properties.
• When using relative, left/right/top/bottom will nudge the element from its original position.

Example for relative, this text is moved 50px from it's original position.

        CSS
        
          #example-relative {
            position: relative;
            right: 50px;
          }
      

Absolute positioning

• Will take an element out of the normal flow of the webpage.
• So other elements will ignore it / behave as if it's not there.
• Allows you to place any page element exactly where you want it.

Example for absolute!

        CSS
        
          #example-absolute {
            position: absolute;
            left: 0;
          }
      

Fixed positioning

• Will also take an element out of the normal flow of the webpage.
• Fixed positioning will always be relative to the viewport.
• Can be used to create a "floating" element that stays in the same position regardless of scrolling.

Example for fixed!

        CSS
        
          #example-fixed {
            position: fixed;
            bottom: 0;
            right: 0;
          }
      

References
css-tricks.com | Absolute, Relative, Fixed Positioning: How Do They Differ?
css-tricks.com | position
levelup.gitconnected.com | CSS position property: relative, absolute, static, fixed, sticky
developer.mozilla.org | position - CSS: Cascading Style Sheets