Flow and Positioning

See how a browser lays out a page before you change anything (normal flow and display), then move things on purpose with relative, absolute, fixed and sticky positioning, and decide what sits on top with z-index.

Updated

Normal Flow

  1. Normal Flow and the display Property (Apprentice): Before you move anything, the browser already lays out every page by the same rules, blocks stacking like bricks and inline boxes flowing like words, and the display and overflow properties let you change how a box takes part.

Positioning

  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.

Exercise: Badges and a Sticky Header

  1. Exercise: Badges and a Sticky Header (Apprentice): Pin New! badges to the corners of Paws & Whiskers' pet cards, lay an overlay over a photo, make the header stick and the Adopt today button stay on screen, and choose what sits in front, while the tests check every rule.