CSS z-index often behaves unexpectedly due to browser painting order and stacking contexts. The post explains how browsers determine which elements render on top, covering painting order rules, how positioned vs. non-positioned elements differ, and how stacking contexts are created (e.g., via z-index on positioned elements, opacity < 1, flex/grid children). A key insight: a child element's z-index only applies within its parent stacking context, so a modal with z-index: 99 inside a header with z-index: 1 can never appear above a footer with z-index: 2. The post also covers nested stacking contexts and how frameworks like React, Angular, and Vue use portals to work around these constraints.
Sort: