The way a browser paints, in particular the z-index property itself, occupy an unusual spot in our collective knowledge. Most of the time, things work well enough that we never really feel the need to consider the underlying mechanics, but we still vaguely know there's more than meets the eye.

One day you'll have multiple layers seamlessly blending on a page, the next you won't be able to figure out why a click event is reaching the wrong element. Something's in the way, our element needs to be on top.

Like any good arms race, escalation is the smart choice, and so z-indexes of 10 turn into 100, 100 turns into 1000, and soon enough we can't distinguish real code from falling asleep on the keyboard.

It doesn't have to be this way. By digging down to the root of the problem, we can understand what's really going on. After all, there's only 3 really fundamental z-index values. How hard can it be?