Position Quest

Levels 0 / 10 cleared

Draft 01

Δ —

Start with relative positioning: use CSS offsets to move the hero onto the mark.

MARK
YOU
Settings

Changes run automatically. Cover MARK to finish the level.

How to play

  1. Read the level goal.
  2. Write CSS to move YOU onto MARK.
  3. Cover the target to unlock the next level.

Stuck? Use Show hint or the Cheat sheet.

Progress saves in this browser.

Best run —

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. Usually anchored to the viewport. Certain ancestors, such as transformed elements, can establish its containing block instead.
position: sticky;
Relative until it crosses a scroll threshold (top: 0 etc.), then it sticks, within its parent.
z-index
Stacking order within a stacking context. Works on positioned elements and flex or grid items; higher values paint above lower ones in the same context.
Tricks
Center anything: position:absolute; inset:0; margin:auto; or left:50%; top:50%; transform:translate(-50%,-50%);