In CSS, the position property is used to control the positioning of an element on a web page.

There are mainly use five types of positions.

1. position: static;
2. position: relative;
3. position: absolute;
4. position: fixed;
5. position: sticky;

Code Link : https://github.com/Vishwjee5/Position---CSS

1. position: static;: This is the default position value. Elements with position: static are positioned according to the normal flow of the document. They are not affected by positioning properties like top, bottom, left, or right. In other words, they stay where they are naturally placed in the HTML structure.

     position: static;
   

   

2. position: relative;: Elements with position: relative are positioned relative to their normal position in the document flow. By using positioning properties like top, bottom, left, or right, you can nudge the element from its original position. However, it still occupies space in the normal flow, and other elements around it are not affected.

     position: relative;
     top: 40px;
     left: 40px;
   

   

3. position: absolute;: Elements with position: absolute are positioned relative to their closest positioned ancestor or the initial containing block if there is no positioned ancestor. They are taken out of the normal flow, allowing precise placement using top, bottom, left, or right properties. Absolute positioned elements do not affect the position of other elements.

     position: absolute;
     top: 50px;
     left: 50px;
   

   

4. position: fixed;: Elements with position: fixed are positioned relative to the viewport (the browser window) and do not move when the page is scrolled. They stay fixed in their specified position, creating elements that remain visible even as you scroll through the page.

     position: fixed;
     bottom: 50px;
     right: 50px;
   

   

5. position: sticky;: Elements with position: sticky are positioned based on the user's scroll position. They behave like relative positioning until a specified threshold is reached, at which point they become "sticky" and remain fixed at a specific position. Sticky elements are useful for creating effects where an element sticks to a particular location as you scroll, but they return to their normal flow once the scroll threshold is passed.

    position: sticky;
    top: 10px;