CSS Positioning

The position property controls how an element is placed in the document and how it responds to the top, right, bottom, and left offset properties. Positioning is one of the more conceptually tricky parts of CSS because each value changes not just where the element itself sits, but how it interacts with the normal flow of surrounding content.

There are five values to know: static, relative, absolute, fixed, and sticky. Each removes the element from — or keeps it in — normal document flow differently, and each establishes offsets relative to a different reference point.

Why it matters

Badges on icons, dropdown menus, modals, sticky headers and tooltips all depend on the position property. Most confusion comes from one rule: an absolutely positioned element is placed relative to its nearest positioned ancestor. Once that is clear, positioning stops being trial and error.

static and relative

position: static is the default for every element — it sits in normal document flow, and top/right/bottom/left have no effect on it. position: relative also stays in normal flow (it still takes up its original space), but now top/right/bottom/left can nudge it visually away from that original position, without affecting the layout of surrounding elements. Relative positioning is also commonly used just to establish a new containing block for an absolutely positioned child.

absolute and fixed

position: absolute removes the element from normal flow entirely, so surrounding elements act as if it isn't there, and it is positioned relative to its nearest ancestor that has a position value other than static (its "containing block"). If no such ancestor exists, it positions relative to the initial containing block (roughly the page). position: fixed also removes the element from flow, but always positions it relative to the browser viewport, so it stays in place even when the page scrolls — commonly used for sticky headers or floating action buttons.

sticky

position: sticky behaves like relative positioning until the element reaches a specified threshold (e.g. top: 0) during scrolling, at which point it "sticks" and behaves like fixed positioning until its containing block scrolls out of view. It is commonly used for section headers that should stay visible while their section is on screen, then scroll away naturally once the next section begins.

Examples

<!--
<div class="card">
  <span class="badge">New</span>
  <p>Card content...</p>
</div>
-->

.card {
  position: relative; /* establishes the containing block */
  padding: 1rem;
}

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

The "New" badge is pinned to the top-right corner of the card, positioned relative to the card itself rather than the page, because .card establishes the containing block.

.section-header {
  position: sticky;
  top: 0;
  background: white;
  padding: 0.5rem 1rem;
}

The header scrolls normally with the page until it reaches the top of the viewport, then sticks there while the rest of its section scrolls underneath, releasing once the section ends.

Exercise

Place the button in the top-right corner of main, 10px from the top and 10px from the right. It must be positioned relative to main, not to the whole page. Give main a border and some padding so that the corner is visible.

Expected result: the button sits in the top-right corner inside the bordered box.

/* The page contains: <main> with an <h1>, a <p> and a <button> */

main {
  border: 2px solid gray;
  padding: 20px;
  /* TODO: make main the reference for its positioned children */
}

button {
  /* TODO: take the button out of the flow and place it in the corner */
}

/* The page contains: <main> with an <h1>, a <p> and a <button> */

main {
  border: 2px solid gray;
  padding: 20px;
  position: relative;
}

button {
  position: absolute;
  top: 10px;
  right: 10px;
}

Quick quiz

Interview questions