Learn Z-Index Using a Visualization Tool

Avatar of Chris Coyier
Chris Coyier on

Take the pain out of building site search with the Algolia hosted API. Start free now!

There are some neat interactive demos in here from Thiru Manikandan. There are a couple of very tricky things with z-index that never fail to confuse. In addition to things like requiring positioning and source order, the trickiest are the stacking contexts and parent/child relationships. z-index isn’t a flat playing field. Even if you put z-index: 2147483644ยน on an element, it’s possible nothing will happen because that element might be inside a parent element with its own stacking context and a lower z-index than a sibling or some higher-up level DOM element.

  1. Just three shy of the maximum 2147483647. LOLZ. Hat tip to Dan Danney who mentioned seeing that in the wild recently.

Direct Link →