Why do we use position property in CSS ?

The Position Property is CSS is used to set the position of an element The top, right, bottom, left and z-index properties help us to determine the final position of an element

What is Normal flow ?

Normal Flow, or Flow Layout, is the way that Block and Inline elements are displayed on a page before any changes are made to their layout

CSS position property

We have five positions:-

1. static :-

   This is the default value of the position of the CSS element. in static the element placed is based on the flow if document all element has no position due to which they appear as the normal flow

   position: static;
   

2. relative :-

   The element is positioned according to the normal flow of the document and the offset to itself based on the values of top, right, bottom, left, and z-index. the offset does not affect the position of any other element

   position: relative;
   

3. absolute

   The element is positioned relative to its first positioned(not static) ancestor element.

   position: absolute;
   

4. fixed

   The element will be removed from normal flow, and will be placed relative to the initial containing block established by the viewport and will not be affected by the scrolling

   position: fixed;
   

5. sticky

   The element is positioned according to the normal flow of the document and it toggles between relative and fixed depending on the scroll position. it is positioned relative until a given offset position is met in the viewport, then it sticks in place (like position: fixed)

   position: sticky;