Why does z-index sometimes seem to do nothing?

Uncategorized
1

I’ve seen this happen quite often: you give an element z-index: 9999, expecting it to appear above everything, but another element still covers it.

Here’s a simplified example:

<div class="parent">
  <div class="popup">Popup</div>
</div>

<div class="overlay">Overlay</div>

.parent {
  position: relative;
  z-index: 1;
}

.popup {
  position: absolute;
  z-index: 9999;
}

.overlay {
  position: relative;
  z-index: 2;
}

The popup still appears behind the overlay.

What is happening here?

I’d like to hear how you debug stacking-context problems in real projects. Do you use browser DevTools, or do you usually inspect the parent elements first?