CSS Positioning Cheat Sheet: Static, Relative, Absolute, Fixed & Sticky

CSS position takes a box out of (or offsets it within) normal flow. relative is the usual containing block for absolute children. fixed pins to the viewport (unless a transform ancestor creates a new containing block). sticky toggles between relative and fixed as you scroll.

This CSS cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.

Quick reference

• static: Default. top/left have no effect. This is normal flow.
• relative: Offset from where it would have been. Still occupies original space.
• absolute: Removed from flow. Positioned against the nearest positioned ancestor (or the initial containing block).
• fixed: Pinned to the viewport — unless a transform, filter, or perspective ancestor traps it.
• sticky: Needs a top (or other inset) and a scrolling ancestor. Overflow hidden on parents often kills it.
• inset: inset: 0 is top/right/bottom/left: 0 — fill the containing block.
• z-index: Only applies to positioned boxes (and flex/grid items). Compare inside the same stacking context.
• Stacking: opacity, transform, and filter create new stacking contexts — z-index: 9999 may still lose.

Copy-paste examples

Dropdown and sticky header

The menu is absolute against a relative parent. Sticky needs top and no overflow: hidden on wrappers.

.menu {
  position: relative;
}
.menu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  min-width: 12rem;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: white;
}

Common mistakes

• Positioning every column instead of using Flexbox or Grid.
• Leaving overflow: hidden on a parent and wondering why sticky never sticks.
• z-index: 9999 wars without a documented scale (10, 20, 30).
• Using fixed chat widgets that cover focusable controls and cookie banners.

FAQ

1. Why did BLOGPH0 stop working? A parent with transform, filter, perspective, or contain becomes the containing block. Inspect ancestors.

1. Relative vs absolute for badges? Parent relative, badge absolute with top/right. The parent still sizes from its in-flow content.

1. Is sticky supported everywhere that matters? Yes in current evergreen browsers. Failures are almost always overflow or missing top.

Related CSS cheat sheets

• Css Cheat Sheet 2026
• Css Flexbox Cheat Sheet
• Css Grid Cheat Sheet

Build with this stack

When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds custom web development and also sells ready-made source code. Request a quote and tell us the stack.

Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.