CSS Position Playground
See exactly how each position value behaves, including which ancestor an absolute offset is measured from and why sticky sometimes does nothing.
See how static, relative, absolute, fixed and sticky actually behave, including which ancestor an offset is measured from.
Behaviour
parent (position: relative)
Taken out of the flow entirely, so the space it occupied collapses. Offsets are measured from the nearest positioned ancestor, which is the part that surprises people.
.parent {
position: relative;
}
.box {
position: absolute;
top: 20px;
left: 24px;
}About the css position playground
Position is the CSS property that most reliably produces a bug nobody can explain. The rules are short and their consequences are not obvious, and reading them never sticks the way watching them does.
Two things cause most of the trouble. An absolutely positioned element measures its offsets from the nearest positioned ancestor, so forgetting position: relative on the parent sends it somewhere unexpected. And sticky silently does nothing without a scrolling context and at least one offset. Both are reproducible here in one click.
How to use it
- 1Pick a position value.
- 2Set the top and left offsets.
- 3Toggle the parent between relative and static and watch an absolute element jump.
- 4Turn on the scrolling container to see sticky actually stick.
Questions
Why does my absolutely positioned element land in the wrong place?
Its offsets are measured from the nearest ancestor that is itself positioned. If no ancestor has position set, it measures from the page. Adding position: relative to the parent is the fix, and it is the single most common absolute positioning bug.
Why is my sticky element not sticking?
Sticky needs at least one offset such as top, and it needs an ancestor that actually scrolls. It also never leaves its parent, so if the parent is only as tall as the element there is nowhere to stick to. An overflow value on any ancestor breaks it too.
What is the difference between fixed and absolute?
Fixed positions against the viewport and ignores scrolling. Absolute positions against the nearest positioned ancestor and scrolls with the page. A transform or filter on any ancestor turns fixed into absolute, which catches people out constantly.
Why do top and left do nothing?
Because the element is position: static, which is the default, and static ignores offsets entirely.