CSS <position/>

There are five different position values:

• Absolute

• Fixed

• Relative

• Sticky

• Static

Absolute:

Absolute is a very powerful positioning property. It allows you to place any page element exactly wherever you want. We can use attributes like a top, bottom, left, and right to place the element.

In the absence of any parent element, the HTML element will be placed relative to the page.

position: absolute; 
        top: 34px;%
        left: 134px;

Result:

Fixed:

Positions the element relative to the browser window. The element with position fixed, positioned relative to its viewport and gets fixed at a position and it always stays in the same place even if the page is scrolled.

 position: fixed;
   right: 20px;
   bottom: 2px

Result:

Relative:

The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left.

  position: relative; 
          left: 20px;
          top: 10px;

Result:

Sticky:

Positions the element relative to the user's scroll position. An element with a position fixed will remain stuck to a specific position even after the page is scrolled. This position property is used when we want to keep an HTML element at a fixed spot no matter where on the page the user is.

position: sticky;
               top: 30px;

Result:

Static:

Static positioning is the default for every HTML element. The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect.

#position static {
  height: 100px;
}

Result: