CSS Position Property: Static, Relative, Absolute, Fixed and Sticky

Learn CSS positioning values with clear examples, including relative, absolute, fixed and sticky positioning.

Normal flow and relative positioning

Elements use position: static by default and stay in normal document flow. With position: relative, an element remains in the flow but can be offset from its usual position. It can also establish a containing block for an absolutely positioned child.

.card {
  position: relative;
}

.card-badge {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-end: 0.75rem;
}

Absolute positioning

An absolutely positioned element is removed from normal flow and positioned against its nearest positioned ancestor. Set that ancestor to position: relative when the child should be placed inside it.

Fixed and sticky positioning

position: fixed places an element relative to the viewport, so it stays in place as the page scrolls. position: sticky behaves like normal flow until it reaches a specified offset, such as top: 0, within its scrolling container.