CSS Positioning & Coordinate Systems

Live Demo: Toggle Position Modes

Pick a position value and drag the sliders. The red box repositions itself, and the coordinate readout shows you exactly where its origin point is and how top/left translate to pixel offsets. This is the fastest way to internalize the difference between relative and absolute.

Position as a Coordinate System, Not a Layout Rule

Here is the mental shift that makes CSS positioning click: top, right, bottom, and left are coordinates, not margins. When you write top: 50px, you are placing the element 50 pixels down from a specific origin point. The question is: origin of what?

Every positioned element lives inside a containing block -- the box that defines its coordinate origin. Think of it as the (0, 0) point for that element. The containing block is different depending on which position value you use, and that is the single most confusing thing about CSS positioning.

For position: absolute and position: fixed, the element is removed from the normal document flow entirely. Its coordinates are measured against the containing block, not against its siblings or parent in the normal flow. This is why an absolutely positioned element can overlap other content -- it has left the coordinate system of the document flow.

The Five Position Values, From a Coordinate Perspective

The table above is the reference. Now let us unpack the three things that cause the most real-world confusion.

Containing Block: The Concept Most Tutorials Skip

If you take one thing away from this page, let it be this: position: absolute is not relative to the parent element. It is relative to the nearest positioned ancestor -- the first ancestor going up the tree that has position set to anything other than static.

This trips up everyone the first time. You put position: absolute on a child, set top: 0; left: 0;, and the element flies to the corner of the page instead of the corner of its parent. The reason: the parent has position: static (the default), so the browser walks up the tree looking for a positioned ancestor, finds none, and uses the viewport as the containing block.

  
  
I am lost

The fix is always the same: add position: relative to the parent. This establishes the parent as the containing block, and now the child's top/left are measured from the parent's padding edge.

  
  
I am anchored

The transform Positioning Trap

Here is a gotcha that has wasted hours of developer time: if you put transform, perspective, filter, backdrop-filter, will-change: transform, or contain: paint on an element, it becomes the containing block for all descendants with position: fixed. Not just direct children -- any descendant.

This means your fixed-position navigation bar suddenly scrolls with the page instead of staying put, because some ancestor 10 levels up has a transform: translateZ(0) for GPU acceleration. The fix is to understand what creates containing blocks:

/* This ancestor looks innocent... */
.site-wrapper {
  transform: translateZ(0); /* GPU optimization */
}

/* ...but it hijacks fixed positioning for ALL descendants */
.nav {
  position: fixed;
  top: 0;
  /* BUG: this is now relative to .site-wrapper,
     not the viewport. It scrolls with the page. */
}

The properties that create a containing block for position: fixed descendants: transform, perspective, filter, backdrop-filter (where supported), will-change with a value of transform/perspective/filter, and contain: paint or contain: layout. If your fixed element is misbehaving, walk up the DOM tree and check for these.

Stacking Contexts: The Z-Axis Coordinate System

Positioning handles X and Y. z-index handles Z -- but it does not work the way most people think. z-index only works inside a stacking context, and a stacking context is not the same thing as the document.

Think of a stacking context as an isolated layer. Elements inside it can stack relative to each other, but the entire layer is positioned as a unit against other layers. So a z-index: 9999 inside one stacking context can still be behind a z-index: 1 in a different, higher-level stacking context.

What creates a stacking context?

• The root element (<html>)
• position: absolute or position: relative with z-index set to anything other than auto
• position: fixed or position: sticky (always, regardless of z-index)
• Any element with opacity less than 1
• Any element with transform, filter, perspective, backdrop-filter, or will-change set to one of those
• mix-blend-mode set to anything other than normal
• isolation: isolate

The practical consequence: if your modal with z-index: 9999 appears behind a dropdown with z-index: 10, it is almost certainly because the modal is inside a stacking context (created by a transform or opacity on an ancestor) that itself sits below the dropdown's stacking context. You cannot fix this by raising the modal's z-index -- you need to move the modal outside the ancestor's stacking context, or remove the property creating it.

Viewport Units & Responsive Positioning

When you use position: fixed or position: absolute with percentage offsets, those percentages are relative to the containing block's dimensions, not the element's own size. top: 50% means 50% of the containing block's height.

Viewport units let you position relative to the actual browser window:

The dvh / dvw / svh / lvh units are newer and solve the mobile Safari problem where 100vh includes the area behind the URL bar, causing content to be cut off. Use 100dvh instead of 100vh for elements that should fill the visible viewport.

Real-World Patterns That Actually Work

Centered Modal Overlay

The pattern for a centered modal that works everywhere. The key is combining position: fixed with inset: 0 (shorthand for all four sides) and place-items: center:

.modal-backdrop {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  background: rgba(0,0,0,.5);
  display: grid;
  place-items: center; /* centers the modal */
  z-index: 1000;
}
.modal {
  background: #fff;
  border-radius: 12px;
  padding: 2rem;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
}

Sticky Table Header

position: sticky on a table header is the cleanest way to keep column labels visible during scroll. The trick: top: 0 defines when it sticks, and the scrolling container must be the table's scroll parent:

.table-scroll {
  max-height: 400px;
  overflow: auto;
}
.table-scroll thead th {
  position: sticky;
  top: 0;
  background: #fff; /* must be opaque */
  z-index: 1;
}

Tooltip on Hover

The relative-parent-absolute-child pattern for tooltips. The tooltip is hidden by default and revealed on hover:

.tooltip-trigger {
  position: relative; /* containing block for tooltip */
  display: inline-block;
}
.tooltip {
  position: absolute;
  bottom: 100%; /* sits above the trigger */
  left: 50%;
  transform: translateX(-50%); /* horizontal center */
  margin-bottom: 8px;
  padding: .5rem .75rem;
  background: #1a1a1a;
  color: #fff;
  border-radius: 6px;
  font-size: .85rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.tooltip-trigger:hover .tooltip {
  opacity: 1;
}

Decision Framework: Which Position to Use

FAQ