CSS Position

There are five different position values:

• static: The default value. Elements render in order, as they appear in the document flow.
• relative: The element is positioned relative to its normal position. Setting the top, right, bottom, and left properties will cause it to be adjusted away from its normal position.
• fixed: The element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
• absolute: The element is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
• sticky: The element is positioned based on the user's scroll position. A sticky element toggles between relative and fixed.

Elements are then positioned using the top, bottom, left, and right properties.

.relative-container {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}

.absolute-element {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}