The Position property

The position property used to giving a positioning to the HTML elements

There are different types of position values

static
relative
fixed
absolute
sticky

position: static

HTML elements are positioned static by default

div.static {
  position: static;
  border: 5px solid #56BA13;
}

position: relative

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position

div.relative {
  position: relative;
  left: 50px;
  border: 5px solid #56BA13;
}

position: fixed

fixed elements always stays in the 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;
  width: 350px;
  border: 5px solid #56BA31;
}

position: absolute

An element with position: absolute; is positioned relative to the nearest positioned ancestor

it moves along with page scrolling

div.relative {
  position: relative;
  width: 300px;
  height: 100px;
  border: 2px solid #53BA31;
}

div.absolute {
  position: absolute;
  top: 50px;
  right: 0;
  width: 100px;
  height: 50px;
  border: 2px solid #53BA31;
}

position: sticky

A sticky element toggles between relative and fixed, depending on the scroll position

div.sticky {
  position: sticky;
  top: 0;
  background-color: red;
  border: 3px solid #5BAC45;
}