Visualizing How Z-Index Really Works
Thiru Manikandan has put together interactive demos that tackle the most confusing parts of CSS z-index. The property is rarely a simple matter of “higher number wins,” and these visual tools help show why.
Two aspects trip people up constantly: the need for positioning and source order, and more subtly, the way stacking contexts form between parent and child elements.
The demos make it clear that z-index is not a flat playing field. A value like z-index: 2147483644 might have no visible effect if the element sits inside a parent that carries its own stacking context and a lower z-index than a sibling — or another element further up the DOM. ¹
- That’s just three shy of the maximum 2147483647 — a real-world value spotted recently by Dan Danney.
