CSS Positioning

Analogy categoryAnalogies

Introduction

The CSS position property determines how an element is placed in the document. By default, every element is static, meaning it follows the normal document flow. Changing position to relative, absolute, fixed, or sticky lets you take an element out of, or offset it within, that flow using the top, right, bottom, and left offset properties.

🏏

Cricket analogy: The default 'static' position is like a fielder standing in their assigned spot per the field plan; switching to 'fixed' is like a wicketkeeper who never leaves their crease regardless of where play moves, using top/bottom/left/right offsets to fine-tune exact placement.

Syntax

css

.box {
  position: static | relative | absolute | fixed | sticky;
  top: 10px;
  right: auto;
  bottom: auto;
  left: 20px;
  z-index: 10;
}

Explanation

static ignores offsets entirely. relative positions the element relative to its own normal position, without removing it from the flow — other elements still act as if it were in its original spot. absolute removes the element from the flow and positions it relative to its nearest positioned ancestor (any ancestor with a position other than static); if none exists, it uses the initial containing block (the viewport/html). fixed positions relative to the viewport and stays in place during scrolling. sticky behaves like relative until the element crosses a defined threshold (e.g. top: 0), then it 'sticks' like fixed within its containing block. z-index controls stacking order but only applies to positioned elements (non-static).

🏏

Cricket analogy: 'Relative' is a fielder nudged slightly from their marked spot while the field plan still counts them as being there; 'absolute' is a substitute fielder placed relative to the nearest captain's instruction, or the boundary rope if no captain set one; 'fixed' is the sightscreen locked to the bowler's end regardless of overs; 'sticky' is a fielder who stays put until the ball crosses the 30-yard circle, then follows like a fixed marker; and only fielders with an assigned position (not just standing anywhere) can be 'in front' in the stacking sense of z-index.

Example

css

.card {
  position: relative;
}

.badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: red;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
}

.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
}

Output

The .badge element is pinned to the top-right corner of .card because .card is the nearest positioned ancestor. The .navbar scrolls normally with the page until it reaches the top of the viewport, then sticks there while the rest of the page continues to scroll beneath it.

🏏

Cricket analogy: The '.badge' pinned to the top-right corner of '.card' is like a 'Man of the Match' sticker pinned to the corner of a specific player's profile card, anchored to that card as the nearest positioned reference; the '.navbar' scrolling then sticking at the top mirrors a scoreboard that moves with play until the innings break, then locks at the top of the broadcast.

position: sticky only works if the element has a defined threshold (top, bottom, etc.) and its parent does not have overflow: hidden or a height that clips the sticky element.

Key Takeaways

static is the default; offsets (top/left/etc.) have no effect on it.
relative offsets an element from its own original position without removing it from flow.
absolute positions relative to the nearest positioned (non-static) ancestor and removes the element from flow.
fixed positions relative to the viewport and ignores scrolling.
sticky toggles between relative and fixed behavior based on scroll position and a defined offset threshold.