What does position: absolute position against?

An absolutely positioned element is laid out relative to its containing block, which is the padding box of the nearest ancestor whose position is not static. If no such ancestor exists, it falls back to the initial containing block (the viewport).

Why did my position: fixed element stop tracking the viewport?

If any ancestor has a transform, filter, perspective or will-change that creates a containing block, that ancestor — not the viewport — becomes the containing block for fixed descendants. The fixed element then scrolls with that ancestor instead of staying pinned.

How does position: sticky work?

A sticky element behaves like relative until the user scrolls its nearest scroll container past the inset threshold you set (e.g. top: 0). It then sticks at that offset like fixed, but only while it remains within its containing block, snapping back at the container's edge.

Which position values create a stacking context?

fixed and sticky always create a stacking context. relative and absolute create one only when a z-index other than auto is set. static never does, and ignores z-index entirely.

Does this tool run offline?

Yes. The position reference runs entirely in your browser with JavaScript. Nothing is uploaded, logged or stored.

CSS Position Property Reference

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

Where an element really sits

The position property is the foundation of CSS layout control: it decides whether an element flows normally, shifts visually, or is lifted out of flow and pinned to a containing block. Getting it wrong produces the classic bugs — a fixed element that scrolls, or an absolute element anchored to the wrong parent. This reference explains all five values with their containing block, inset behaviour, flow impact and stacking-context rules.

How it works

The top, right, bottom and left insets (and the inset shorthand) are measured against the element’s containing block, which differs per value:

static — default; insets and z-index are ignored, element stays in flow.
relative — offset from its in-flow position; original space is preserved.
absolute — removed from flow; positioned in the nearest positioned ancestor.
fixed — removed from flow; positioned in the viewport (or a transformed ancestor).
sticky — in flow until a scroll threshold, then sticks within its scroll container.

Establishing a stacking context matters for z-index: fixed and sticky always create one, while relative/absolute only do so once z-index is not auto. A transform or filter on an ancestor silently reparents fixed descendants — the single most common positioning surprise.

Tips and notes

Set position: relative on a parent to anchor absolute children to it.
A transform anywhere up the tree can break position: fixed.
sticky needs room to move — it does nothing if the container is the same height.
static ignores z-index; give an element a positioning value to stack it.