The CSS position property determines how an element is positioned in a document. It works together with properties such as top, right, bottom and left.

Every HTML element is positioned as static by default. Static elements follow the normal document flow and are not affected by top, right, bottom or left.

.box {
  position: static;
}

A relatively positioned element remains in the normal document flow, but it can be moved using top, right, bottom and left.

.box {
  position: relative;
  top: 15px;
  left: 20px;
}

An absolutely positioned element is removed from the normal document flow. It is positioned relative to its nearest positioned ancestor.

.parent {
  position: relative;
}

.badge {
  position: absolute;
  top: 15px;
  right: 15px;
}

A fixed element remains in the same position even when the page is scrolled. It is positioned relative to the viewport.

.button {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

A sticky element behaves like a relatively positioned element until a specified scroll position is reached. It then sticks to that position within its scrolling container.

.menu {
  position: sticky;
  top: 0;
}

The offset properties determine how far a positioned element is moved from its reference edge.

.box {
  position: absolute;

  top: 20px;
  right: 20px;

  bottom: auto;
  left: auto;
}

A parent with position: relative creates a positioning context for a child with position: absolute.

.card {
  position: relative;
}

.badge {
  position: absolute;
  top: 12px;
  right: 12px;
}

An absolutely positioned element can be centered using top: 50%, left: 50% and transform.

.parent {
  position: relative;
}

.child {
  position: absolute;

  top: 50%;
  left: 50%;

  transform:
    translate(-50%, -50%);
}