Chapter 9 — Positioning and Stacking

Move elements deliberately, anchor labels, keep useful controls visible, and manage intentional overlap.

New concepts

Static, relative, absolute, fixed, and sticky positioning; top, right, bottom, and left offsets; containing blocks; source order; z-index; and basic stacking contexts.

Read the Phase 7 gauge

What changed?

The earlier chapters size and arrange boxes in normal flow. This chapter changes where selected boxes render or how they behave during scrolling, while keeping normal flow as the default.

Lessons

  1. 1. Static and relative positioning
  2. 2. Absolute positioning and containing blocks
  3. 3. Fixed and sticky positioning
  4. 4. Z-index and stacking contexts

Checkpoint

Build a card with an anchored badge and a scrolling panel with a sticky heading. Explain which elements remain in normal flow, what establishes each containing block, and why each z-index value is needed.