The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).

There are five different position values:

• static
• relative
• fixed
• absolute
• sticky

Global HTML Code:

<div class="static"></div>
<div class="abs"> </div>

1. Static

HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, and right properties.

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

2. relative

An element with position: relative; is positioned relative to its normal position. We can have top, left, right and bottom.

div.static {
  position: relative;
	top: 50px;
	left: 50px;

  border: 3px solid #73AD21;
  height:100px;
  width:100px;
}

3. Absolute

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block.

div.static {
  position: relative;
  border: 3px solid #73AD21;
  height:100px;
  width:100px;
}
div.abs {
  position:absolute;
  top: 50px;
  left:150px;
  border: 3px solid #73AD21;
  height:100px;
  width:100px; 
}

4. Fixed & Sticky

These positions are bit tricky and I think this video can explain better much than this docs. Click here to learn more about fixed and Sticky