Z-index

Definition

z-index is the value that decides, when several elements land in the same spot, which one comes forward and which one gets hidden behind. A higher value moves an element toward you and covers the others; a lower value pushes it back so it gets covered. If the shadows we looked at earlier are a visual trick that makes an element seem to float, z-index is the value that decides the actual stacking order itself. That is why a dropdown menu can open without being cut off by the content below it, and why a modal can cover the whole screen and sit right at the front. When elements simply sit side by side, you almost never have to think about this value. But the moment one element needs to overlap and rise above another, it suddenly starts to matter. It is a quiet rule working behind the screen — invisible most of the time, showing its presence only when you actually need it.

Why does it matter?

z-index matters because it lets overlapping elements appear in the order you intended. Things like dropdowns, modals, tooltips, and notifications need to float briefly on top of other content, and without z-index they can end up hidden behind — sometimes so badly that you cannot even click them. But this value is tricky to manage. The moment one element refuses to sit on top and you slap on a huge number like 999999 to force it, the next element needs an even bigger number, and the one after that needs a bigger one still. This is the so-called z-index war. Eventually nobody knows which value is set to what or why, and maintenance turns into a nightmare. So rather than picking z-index values on the spot, the key is to design the layers of the whole screen up front and only assign values within those rules.

Common mistakes

• Slapping on a huge number like 999999 on the spot every time an element gets hidden. Do this and the next element has to use an even bigger value, which kicks off a race that ends in a full-blown z-index war where nobody knows which value is set to what or why.
• Assigning values one at a time as you need them, without deciding the layers up front. Scattered z-index values with no rule leave you unsure where a new element should fit, so unexpected overlap problems keep cropping up over and over.

Practical tips

• Decide a few layers for your screen in advance. For example, base content at 0, dropdowns at 100, modals at 1000, tooltips at 1100 — split the layers by role like this, and when a new element appears you can tell right away which layer it belongs to.
• Keep those layer values in one place, as tokens or constants, instead of scattering them around. When the values live in a single spot, it is easy to see the whole stacking order at a glance and adjust it.
• Before you blindly crank a value higher, check whether it is really a z-index problem, or whether the elements belong to different stacking contexts so the value simply does not apply. Once you pin down the cause, you can often fix it without any huge numbers at all.

Related concepts