CSS Position Sandbox
Experiment with position values and offsets in a small preview box.
Learn CSS positioning by doing
static, relative, absolute, fixed, sticky — CSS positioning trips up beginners and experts alike because the behavior depends on context. This sandbox lets you change an element’s position and offsets in a small preview so you can watch how each value moves it.
Seeing the box respond to top, left, and the position value builds real intuition faster than reading definitions. Experiment until the behavior clicks, then copy the position and offset CSS you settled on.
Positioning, previewed
absolute is relative to the nearest positioned ancestor while fixed is relative to the viewport — the sandbox shows exactly what each does. Runs in your browser.
Frequently asked questions
Which position values can I try?
static, relative, absolute, and sticky, each with top, left, and z-index values, inside a 170px-tall preview box that is itself position: relative.
Why do top and left do nothing with static?
Offsets and z-index only apply to positioned elements. With position: static (the default), the item stays in normal flow and ignores them.
What is absolute positioned relative to?
The nearest ancestor with a position other than static, which is the preview box here. If no ancestor is positioned, it uses the page itself.
Related tools
Practical utilities for front-end design and implementation work.