Introduction to CSS Positions

While writing CSS to design the HTML file, many a times we need to position certain elements such a way that it meets the desired view of the webpage and CSS Positions help us to achieve the same objective.

In technical terms, the position property of CSS specifies the type of positioning method to be applied on the HTML element. CSS position can take following five values:

• Static
• Relative
• Fixed
• Absolute
• Sticky
  

With the position of the element set among any one of the above values, we can define more properties like top, bottom, left and right to position the element.

position: static;

This position value is by default applied on all the elements and it is reponsible for the positioning as per the normal flow of the page. The properties like top, bottom, left and right have no effect on the element in this condition.

position: relative;

When the position value of an element is set to be relative, then the element is positioned relative to its normal position. When the value of properties like top, bottom, right or left are set, then the element is adjusted accordingly from the normal position.
Also the gap left by the relatively positioned element is not filled by any other element.

div{
   position: relative;
   top: 20px; //shifted 20px from the top of the normal position.
   left: 20px; //shifted 20px from the left of the normal position.
}

position: fixed;

When the position of the element is set to fixed value then the element is positioned relative to the viewport that means even if the page is scrolled down or up, that particular element always stays at the position. The top, right, bottom or left properties are used to specify the position.
In this case also, no space is created for other elements at the normal position in the page.

div{
   position: fixed;
   top: 20px; // fixed at this position
   left: 20px; //fixed at this position
}

position: absolute;

The element with position: absolute; is positioned relative to its nearest positioned ancestor element creating no space in the page layout. In the case of fixed value, the positioning is relative to the viewport but not in this case.
If there is no any nearest positioned ancestor present, then positioning is done relative to the initial containing block, in most cases the document body.

  .parent-element{
      position: relative;
      width: 400px;
      height: 200px;
      border: 2px solid red;
 } //nearest positioned ancestor

.absolute-element{
       position: absolute;
       top: 80px;
       right: 0;
       width: 200px;
       height: 100px;
       border: 2px solid blue;
} //absolute element

position: sticky;

The element with position value set to sticky serves an interesting purpose. This position property in simpler words toggles between relative and fixed properties of CSS position and is positioned according to the user's scroll position. Acutally, what happens is that the element is positioned relatively until a given offset is met on the viewport, and when this happens the element sticks to that position assuming the behaviour of a fixed positioned element.

div{
  position: sticky;
  top: 0px;
  border: 2px solid red;
  //when the element met the "top: 0px" condition then the...
  //...element sticks to that position
}

To learn more about CSS Positions, I highly recommend going through following links: W3School
MDN
CSS-Tricks