The position property of CSS helps position an element on the web page. The default positioning of any element is "static" which means the element is positioned in a normal document flow i.e the order in which the elements are written in the source code.

The position property can take these possible values:

• static
• relative
• absolute
• fixed
• sticky

static

When the position property is set to "static", this doesn't change and affects the position of elements in any different way and the elements follow the normal document flow. Also, the top, right, bottom, and left properties have no effect on elements when they are positioned statically.

position property assumes this value by default.

h1 {
  position: static;
}

relative

When the position property is set to "relative", this changes the position of the element in a document and positions it relative to its position. The element then has access to the top, right, bottom, and left properties which can be used to position the element relative to where it was in the document. One thing to note here is when the relative positioned element uses top, right, bottom, or left properties then no element occupies its left out space, it's as if the element has left some ghost👻 there and nobody goes to that place and it's vacant and unoccupied.

div {
  position: relative;
  top: 20px;
  left: 15px;
}

absolute

When the position property is set to "absolute", this changes the position of the element in a document and positions it relative to its parent, if the parent container is set to "relative" then its positioned relative to its parent, and if the parent isn't positioned "relative" then the element is positioned relative to the document body and sticks on screen while scrolling(it behaves as fixed in this case). Applying an "absolute" position property value to an element removes it from the normal document flow and it's positioned relative to its parent or document body when its parent isn't positioned.

When the parent is positioned, the "absolute" position value positions the child relative to its parent

parent {
  position: relative;
  width: 100%;
  height: 40vh;
}

child {
  position: absolute;
  top: 20px;
  left: 15px;
}

When the parent isn't positioned then the element is positioned relative to the document body and sticks to the document when the screen is being scrolled (fixed)

child {
  position: absolute;
  top: 20px;
  left: 15px;
}

fixed

The "fixed" position property value places the element relative to the viewport by giving it the desired top, right, bottom, and left values. The element is fixed on the viewport and stays there even when scrolling and doesn't leave any gaps in its place, unlike "relative" property value.

div {
  position: fixed;
  top: 50px;
}

sticky

The "sticky" position property value places the element according to the user's scroll position and toggles between "relative" and "fixed" based on the user scroll. We can specify the offset to determine when it's fixed on the screen based on scroll by using top, right, bottom, and left properties.

The header sticks to the screen at 0px when scrolling

.header {
  position: sticky;
  top: 0px;
}