The Z Dimension
summary
Browsers paint elements back to front using the painter's algorithm so there is no innate Z axis only document and tree order and stacking contexts that flatten subtrees. Box-shadow becomes a diagnostic to reveal order, inline content draws above blocks, floats sit between, and z-index and stacking contexts can unexpectedly trap children. Use chrome tracing (cc picture) to record every paint and timing, and forcing a layer with translate3d(0,0,0) or translateX cuts repeated paints and offloads compositing to the GPU.
AI-written summary · about
chapters (9)
- 0:00Introduction
- 1:21The Spec
- 2:10Tree Order
- 2:50Inline Element
- 4:31Global Order
- 5:59Tools
- 8:09Layers
- 13:05Developer Tools
- 14:39Outro
