Struggling with Positioning your element via CSS - Here's the cure...

Even in the world of flexbox and gridbox, the position property has not lost its glory. It is still a very handy technique to place a desired element onto the webpage. In this blogpost, I am gonna walkthrough you this important property for deeper understanding.

The position property specifies the type of positioning method used for an element. There are 4 types of positioning method-

1. static
2. relative
3. fixed
4. absolute

Once position of an element is set, offset like top, right, bottom, and left properties determine the final location of positioned elements. Lets dive into each of them one by one.

1. position : static It is the by default nature. The element is positioned as per the normal flow of the document. The offset properties will have no effect here.

1. position : relative Many times we would like to change the position of an element with respect to the element itself. on setting position : relative, we can place the element relative to itself based on the values of top, right, bottom, and left.

1. position : absolute Many times we would like to change the position of an element with respect to its parent. This requires setting position of the parent as relative. If no such parent exist, viewport will act as parent for such element. The element is removed from the normal document flow, and no space is created for the element in the page layout.
   https://codepen.io/krishna-saini/pen/gOeRoKM?editors=1100

1. position : fixed Many times we would like to fix the position of an element. on setting position : fixed, we can fix the element relative to viewport at any place based on the values of top, right, bottom, and left and it always stays in the same place even if the page is scrolled. It is important to note that such element is removed from the normal document flow, and no space is created for the element in the page layout. it is generally used to create sticky navigation bar.