Fundamentals · Boxes, flow and layers

Formatting contexts and CSS positioning-style app

Illustrative system design for a boxes, flow and layers app like Formatting contexts and CSS positioning: 4 topics to read, from requirements to deep dives.

Illustrative design, not Formatting contexts and CSS positioning’s actual implementation. Arrowbox is not affiliated with Formatting contexts and CSS positioning’s owner. Disclaimer

Start with Boxes and flow Read for freeUpdated 2 Oct 2026

Core

The box model and normal flowBeginner · 32 min read
Every element generates boxes with content, padding, border and margin, and in normal flow block boxes stack down the page while inline boxes wrap into lines.
Formatting contextsIntermediate · 33 min read
A formatting context is the set of layout rules a box applies to its children: block, inline, flex or grid, and a new block formatting context walls its contents off from floats and margins outside.
Positioning and containing blocksIntermediate · 37 min read
Each position value decides whether a box keeps its place in normal flow, and its offsets are measured from its containing block, which a transformed ancestor can quietly change and a clipping one can cut.
Stacking contexts and the top layerIntermediate · 31 min read
z-index only competes inside its stacking context, so a menu with z-index 9999 still loses to a header in a sibling context; the top layer is the one place that sits above everything.