Position in css

The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

position: static This is the default value.The top, right, bottom, left, and z-index properties have no effect.

div.static {
  position: static;
  border: 3px solid #73AD21;
}

position: relative This is positioned relative to its normal position.the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

position: absolute The element is removed from the normal document flow, and no space is created for the element in the page layout. f an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
}

position: fixed this is positioned relative to the viewport, which means it always stays in t he same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}

position: sticky This is positioned based on the user's scroll position.A sticky element toggles between relative and fixed, depending on the scroll position.

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: green;
}