Positioning

Positioning: Positioning: relative and absolute, Positioning: fixed and sticky, Stacking: z-index and What Sits on Top.

Updated November 10, 2026

1. Positioning: relative and absolute (Apprentice): Nudge an element from its normal place with position relative, and pin one to a corner of its parent with position absolute, the pattern behind every badge, close button and photo caption on the web.
2. Positioning: fixed and sticky (Apprentice): Keep a "chat with us" button on screen with position fixed, keep a header or a table's headings in reach with position sticky, and choose the right one of the five position values for any part of a page.
3. Stacking: z-index and What Sits on Top (Journeyman): When boxes overlap, the browser stacks them like papers on a desk, and z-index, positioning and stacking contexts decide which one ends up on top, including why z-index 9999 sometimes still loses.