All CSS Property

1. static: This is the default position value. Elements with position: static is positioned according to the normal flow of the document.

    .box {
      position: static;
    }
   

2. relative: Elements with position: relative are positioned relative to their normal position in the document flow. You can use the top, bottom, left, and right properties to adjust the position.

3.  .box {
      position: relative;
      top: 10px;
      left: 20px;
    }
   

4. absolute: Elements with position: absolute are positioned relative to the nearest positioned ancestor (or the containing block if no positioned ancestor is found). If there is no positioned ancestor, it is positioned relative to the initial containing block (the viewport).

.box {
  position: absolute;
  top: 50px;
  right: 20px;
}

1. fixed: Elements with position: fixed are positioned relative to the viewport and do not move even if the page is scrolled.

.box {
  position: fixed;
  top: 0;
  right: 0;
}

1. sticky: Elements with position: sticky is positioned based on the user's scroll position. They behave like position: relative within their parent element until a specified offset threshold is reached. Then they become position: fixed and "stick" to a specific position.

.box {
  position: sticky;
  top: 20px;
}