What's the difference between a `relative`, `fixed`, `absolute`, `sticky` and `static`-ally positioned element?

TL;DR

static participates in normal flow. relative stays in flow but can be visually offset and establish a containing block. absolute and fixed are out of flow; absolute positioning uses its containing block, while fixed positioning usually uses the viewport. sticky stays in flow and is constrained within its scrolling container after crossing an inset threshold. Transforms and other properties can change the containing block, so “fixed means viewport” and “absolute means nearest positioned ancestor” have exceptions.

What's the difference between a relative, fixed, absolute, sticky and static-ally positioned element?

Comparison

An element is “positioned” when its computed position is not static.

Static and relative positioning

position: static is the initial value. Physical or logical inset properties do not move a statically positioned box.

A relatively positioned box is laid out normally, so its original space remains reserved. Insets then shift the rendered box without causing siblings to occupy the vacated area. It also becomes a containing block for many absolutely positioned descendants:

.card {
  position: relative;
}

.card__badge {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  transform: translate(50%, -50%);
}

Absolute and fixed positioning

An absolutely positioned box is removed from normal flow. Its containing block is often the nearest ancestor whose position is not static, but transforms, containment, and several other properties can also establish one. If no qualifying ancestor exists, it uses the initial containing block.

A fixed box is also out of flow and is normally positioned relative to the viewport, so it stays in place during document scrolling. However, an ancestor with a transform, perspective, or certain containment properties can establish its fixed-position containing block instead. Fixed UI should be tested at zoomed and narrow sizes so it does not cover content or trap controls off-screen.

Sticky positioning

Sticky positioning is not simply a switch from relative to fixed. The box remains in flow, then its position is adjusted to stay within inset constraints as its nearest scrolling ancestor moves. At least one inset on the relevant axis, such as inset-block-start, must be non-auto:

.section-heading {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  background: Canvas;
}

Sticky behavior can appear broken when an ancestor establishes an unexpected scrolling mechanism, when the containing block is too short, or when no inset is set. Inspect ancestor overflow values and the available scroll distance before adding arbitrary offsets.

Positioning also interacts with stacking contexts. fixed and sticky boxes create stacking contexts, and a relative or absolute box does so when its z-index is not auto.

Further reading

• position (MDN)
• Layout and the containing block (MDN)
• Stacking context (MDN)

Exercises