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.

Use sticky for content that follows the scroll

A sticky element keeps its normal place in the document, then sticks at an offset while its scroll container moves. Set an inset such as top or inset-block-start so the browser knows where it should stick.

.section-heading {
  position: sticky;
  inset-block-start: 0;
  background: white;
}

Use fixed for viewport controls

A fixed element is removed from normal flow and positioned relative to its containing block, commonly the viewport. It does not reserve space in the page, so keep it from covering important content.

.back-to-top {
  position: fixed;
  inset-inline-end: 1rem;
  inset-block-end: 1rem;
}

Control which positioned item appears on top

The z-index property can set the stack order of positioned items. A large number does not automatically place an item above everything on the page: stacking contexts are layered as groups, so a child stays within its parent’s stacking context.

CSS positioning questions

What is the difference between relative and absolute positioning?

A relatively positioned element keeps its space in normal flow and can be offset from its normal position. An absolutely positioned element leaves normal flow and uses its nearest positioned ancestor as its reference when one exists.

Why is sticky positioning not working?

Check that an inset such as top: 0 is set, that the element has room to move, and that its scrolling container allows it to reach the sticky position.