CSS Position Explained: static, relative, absolute, fixed and sticky

Published November 5, 2026 · 11 min read

The position property decides how an element is placed on the page: where it sits, what it's measured from, and whether it moves when you scroll. It's behind sticky headers, notification badges, dropdown menus, popups and chat buttons.

There are five values. This guide shows each one with a picture, explains the rule behind it, and gives you real examples to copy.

Open the position playground Switch values and scroll a real page to see the difference.

The short version

First: top, right, bottom, left

Positioned elements are moved with four offset properties: top, right, bottom and left. Each one is a distance from an edge. top: 20px means “20px down from the top”, and right: 0 means “touching the right edge”.

The shorthand inset sets all four at once: inset: 0 is the same as top: 0; right: 0; bottom: 0; left: 0. What the offsets are measured from depends on the position value, which is what the rest of this guide is about.

1. static: the default

Every element starts as position: static. It sits wherever it falls in the normal flow of the page, one block after another. Offsets and z-index are ignored. You'll rarely write static yourself, except to undo another value.

2. relative: nudged from its normal spot

.box {
  position: relative;
  top: 20px;    /* 20px down from where it would be */
  left: 40px;   /* 40px right from where it would be */
}

A relative element is laid out normally first, then shifted by its offsets. The important part: the space it originally took stays reserved. Nothing around it moves, so it may overlap its neighbours.

In practice, position: relative is mostly used with no offsets at all, as an anchor for absolutely positioned children. That's the next value.

3. absolute: placed inside a positioned parent

.card {
  position: relative;   /* the anchor */
}
.badge {
  position: absolute;
  top: -10px;
  right: -10px;         /* hang just over the top-right corner */
}

An absolute element is removed from the normal flow. The other elements close the gap as if it weren't there. It's then placed using its offsets, measured from its containing block: the nearest ancestor whose position is anything other than static.

If no ancestor is positioned, it's placed against the page itself. That's the #1 absolute positioning bug: the badge ends up in the corner of the screen instead of the corner of the card. The fix is almost always position: relative on the parent.

Some other things to know:

• An absolute element shrinks to fit its content, unless you give it a width.
• Setting both left and right (or using inset: 0) stretches it between them. That's handy for overlays that cover their parent.
• Percentages are relative to the containing block. top: 50% means halfway down the parent.

.photo { position: relative; }
.photo::after {
  content: "";
  position: absolute;
  inset: 0;                         /* cover the whole parent */
  background: rgba(0, 0, 0, .4);
}

4. fixed: pinned to the window

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
body {
  padding-top: 64px;   /* the header's height, so it doesn't cover the content */
}

.chat-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

A fixed element is placed relative to the browser window (the viewport) and doesn't move when the page scrolls. Like absolute, it leaves the normal flow, so the content slides underneath it. That's why the example adds padding to the body: otherwise the top of the page hides behind the header.

Watch out: if any ancestor has a transform, filter or perspective, the fixed element is placed relative to that ancestor instead of the window, and it scrolls with it. If a fixed element suddenly scrolls, look for a transform higher up.

5. sticky: normal, then stuck

.section h2 {
  position: sticky;
  top: 0;              /* stick when it reaches the top */
  background: #fff;    /* so the text scrolling under it is hidden */
}

Sticky is a mix of relative and fixed. The element behaves normally until scrolling brings it to its offset (here top: 0), then it sticks there. It stays stuck only while its parent is still on screen. When the parent scrolls away, the sticky element goes with it.

That's what makes the “one heading replaces another” effect in the picture: each heading is inside its own section.

Sticky not working? Check these three things:

1. You set an offset. position: sticky does nothing without top (or bottom, left, right).
2. The parent is taller than the element. If the parent is the same height, there's no room to stick.
3. No ancestor has overflow: hidden, auto or scroll. That ancestor becomes the scroll container, and the element sticks inside it instead of the page.

z-index: which element is on top?

When positioned elements overlap, z-index decides the order front to back. Higher numbers come forward. With equal values, or no z-index, the element that comes later in the HTML is on top.

.menu {
  position: relative;
}
.menu .dropdown {
  position: absolute;
  top: 100%;    /* just below the menu button */
  left: 0;
  z-index: 10;  /* above the content that follows */
}

Two rules cause most z-index confusion:

• z-index does nothing on position: static elements. It does work on flex and grid items.
• Each element with a z-index (and some other properties, like opacity below 1 or a transform) creates a stacking context. Children can't escape it: a child with z-index: 9999 can still be behind something if its parent is.

Tip: use small, planned numbers, for example 10 for dropdowns, 100 for the header and 1000 for modals, instead of an arms race of 99999s.

Which position should I use?

Position is for special placement. For general page layout, use Flexbox or Grid. Layouts built with absolute positioning break as soon as the content or screen size changes.

Common mistakes

• Absolute element in the wrong place: add position: relative to the parent you want it inside.
• Fixed header covering the content: add padding-top to the body equal to the header's height, or use sticky instead.
• Sticky doesn't stick: missing top, a parent that's too short, or an ancestor with overflow set.
• z-index ignored: the element is static, or it's trapped in a parent's stacking context.
• Building whole layouts with absolute: it looks fine on your screen and breaks on others. Use Flexbox or Grid.

Try it in the playground

The position playground shows a real, scrollable page with a box inside a parent. Try these experiments:

1. Choose relative and move the sliders. The dashed outline shows the space it still keeps.
2. Choose absolute, then untick “parent has position: relative”. The box jumps to the corner of the page.
3. Choose fixed and scroll the preview. The box stays put.
4. Choose sticky and scroll slowly. The box sticks, then leaves with its parent.

Share your work

Built a sticky header or a badge? Share a screenshot as a link with sshot.online, or share your code with the free code sharing tool. No account needed.

Frequently asked questions

Related articles

Developer Tools14 min read

CSS Flexbox Explained: A Visual Guide with Examples

Every Flexbox property in pictures: direction, justify-content, align-items, wrap, gap, flex-grow, plus a navbar, equal-height cards and a sticky footer.

Read More →

Developer Tools10 min read

How to Center a Div in CSS: 7 Easy Ways (with Examples)

Center a div horizontally and vertically with Flexbox, Grid, margin auto and absolute positioning. Pictures of every method, copy-paste code and a live playground.

Read More →

Developer Tools12 min read

CSS Margin vs Padding vs Border: The Box Model Explained with Examples

A picture-by-picture lesson on margin, padding and border: shorthand order, border styles, box-sizing, margin collapse and centering, plus a live playground.

Read More →

← All guides