position in CSS: four placement modes and the ancestor you must not forget

By default, a CSS element follows the normal flow of the page: it stacks right after the previous one, with no need to specify where it goes. The position property changes that rule: it lets an element leave that flow, or shift slightly without disturbing its neighbours.

It is one of the most misunderstood properties in CSS, because its behaviour changes radically depending on the value chosen, and because only one of these values depends on a parent element that is easy to forget to set up.

Definition

position defines how an element is placed on the page. It takes four main values: static (the default behaviour, no particular positioning), relative, absolute, and fixed. As soon as a value other than static is applied, the top, right, bottom, and left properties become active and let the element be shifted relative to a reference point.

The four values, one by one

relative is the most discreet case: the element keeps exactly the space it would normally take, but a top or a left shifts it visually, without its neighbours ever noticing. absolute is more radical: the element leaves the flow entirely, similar to a display: none followed by manual repositioning, and its neighbours behave as if it no longer existed.

Concrete example: the positioned ancestor trap

An absolute element positions itself relative to its nearest positioned ancestor, meaning the first parent, walking up the tree, whose position is not static. If none is found, it falls back to the entire page.

.card {
  position: relative;
}

.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

Here, the badge sticks to the corner of the card because .card carries position: relative. If that line disappears, the badge keeps working, but it positions itself relative to the whole page instead: it migrates to the top right corner of the screen, far from its card, a classic bug that makes absolute look broken when it is simply obeying a different rule. Our HTML and CSS course has learners remove that line as an exercise, so the trap's effect gets seen once before checking for it becomes second nature.

Use cases: which value for which need

• relative: a small visual nudge, or acting as an anchor for an absolute child, without changing anything else in the layout.
• absolute: a badge, a tooltip, a dropdown menu, any element that must sit on top of a specific piece of content.
• fixed: a header or a button that must stay visible permanently, even while the page scrolls.
• position: sticky: a middle ground that behaves like relative up to a scroll point, then like fixed.

z-index often enters the picture right after position: a positioned element can overlap another one, and it is that second property which decides which one appears in front.

Frequently asked questions

Because none of its parents carry a position other than static. Without a positioned ancestor, the absolute element falls back to the document root. The fix almost always consists of adding position: relative to the direct parent meant to act as its anchor.

relative shifts an element while keeping its reserved space on the page, as if it were nudged slightly without touching anything else. absolute removes it from the flow entirely: no space is reserved anymore, and it overlaps whatever content surrounds it.

No. fixed glues an element to the browser window from the moment the page loads, no matter where the user scrolls to. position-sticky behaves like relative at first, then locks in place like fixed only after crossing a scroll threshold defined by top or another offset property.