Position

position controls how an element sits relative to its normal flow. Five values; pick by need.

static — Default

Normal flow. top, right, bottom, left, z-index do nothing.

relative — Nudge From Where It Would Be

.tooltip {
  position: relative;
  top: -2px;
  left: 4px;
}

The element still takes its normal space, but visually shifts by the offsets. Other elements behave as if it hadn’t moved.

relative is also useful as a positioning context — descendants with position: absolute measure from the nearest positioned ancestor.

absolute — Removed From Flow

absolute pulls the element out of the normal flow and positions it relative to the nearest positioned ancestor (anything that isn’t static).

.parent { position: relative; }
.badge  {
  position: absolute;
  top: 0;
  right: 0;
}

A common pattern: position: relative on a card, position: absolute on a badge inside.

If no ancestor is positioned, the badge floats relative to the viewport — usually not what you want.

fixed — Pinned to the Viewport

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

Element stays in place when the page scrolls. Common for navbars and modal backdrops.

sticky — Scrolls Until Pinned

The newest one — sticky combines relative and fixed:

.section-heading {
  position: sticky;
  top: 0;
  background: white;
}

Scrolls naturally with the page UNTIL it would scroll past top: 0, at which point it stays pinned. Perfect for section headers in a long page.

Note: sticky works within its scroll container. If a parent has overflow: hidden, sticky might be confined to that parent.

The Inset Property

Modern shorthand for top/right/bottom/left:

.overlay {
  position: absolute;
  inset: 0;           /* shorthand for top: 0; right: 0; bottom: 0; left: 0 */
}

Stretches to fill the positioned ancestor.

Up Next

When positioned elements overlap, z-index decides the order.