Home › CSS › CSS Absolute and Relative Positioning

CSS Absolute and Relative Positioning

For a long time, absolute and relative positioning confused me — and honestly, it still trips me up occasionally. But the more I work with it, the more it clicks. Once you understand the core relationship between these two values, a lot of CSS layout behavior suddenly makes sense.

Here's a clear breakdown of all the position values and when to use each.

The Default: position: static

Every element has position: static by default. Static elements follow the normal document flow — block elements stack vertically, inline elements sit side by side. You can't use top, left, right, or bottom on a static element.

position: relative

A relatively positioned element stays in the normal flow, but you can nudge it from its original position using top/left/right/bottom:

.nudged {
  position: relative;
  top: 10px;
  left: 20px;
}

The element moves 10px down and 20px right from where it would normally be — but its original space is still reserved in the flow. Other elements don't fill the gap.

More importantly: setting position: relative on a parent element establishes a positioning context for absolutely positioned children inside it.

position: absolute

An absolutely positioned element is removed from the normal flow entirely — other elements ignore it and fill its former space. It's positioned relative to its nearest ancestor that has a non-static position:

.parent {
  position: relative; /* establishes positioning context */
}
.child {
  position: absolute;
  top: 20px;
  right: 20px;
}

The child is placed 20px from the top-right corner of its parent. If no ancestor has a non-static position, the element is positioned relative to the document body.

Common uses: tooltips, badges, overlay labels, icons positioned within a card.

position: fixed

A fixed element is positioned relative to the browser viewport and stays there even as the page scrolls. Perfect for sticky navigation bars:

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

position: sticky

Sticky is a hybrid — the element behaves like relative until it reaches a scroll threshold, then acts like fixed:

.sidebar {
  position: sticky;
  top: 2rem; /* sticks when it reaches 2rem from the top */
}

Great for sidebars that should scroll with the page up to a point, then stay visible as the user continues scrolling.