TechWebster Field Manual · css-positions.techwebster.com

POSITION QUEST

Ten drafts. One rule: land the hero on the mark. You'll learn position by moving things — not by reading about moving things.

Certification progress 0 / 10 cleared Best run —

Draft 01

Δ —

MARK
YOU

Live preview — every keystroke moves the hero. The draft is approved when the hero covers the mark.

Position cheat sheet

position: static;
Default. The box sits in normal flow — top / right / bottom / left do nothing.
position: relative;
Offset from where it would be. Flow keeps its original space. Enables z-index and acts as the anchor for absolute children.
position: absolute;
Removed from flow. Anchored to the nearest positioned ancestor (else the page). top/right/bottom/left measure from that ancestor's edges.
position: fixed;
Removed from flow. Anchored to the viewport — ignores scrolling entirely.
position: sticky;
Relative until it crosses a scroll threshold (top: 0 etc.), then it sticks, within its parent.
z-index
Stacking order — but only on positioned (non-static) elements. Higher paints on top.
Tricks
Center anything: position:absolute; inset:0; margin:auto; or left:50%; top:50%; transform:translate(-50%,-50%);