# Why does z-index sometimes seem to do nothing?

**URL:** <https://forum.kirupa.com/t/why-does-z-index-sometimes-seem-to-do-nothing/684025>\
**Category:** Uncategorized\
**Created:** [November 14, 2026, 5:55am UTC](https://forum.kirupa.com/t/why-does-z-index-sometimes-seem-to-do-nothing/684025 "2026-11-14T05:55:29Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Apexcodes](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/apexcodes/32/33967_2.png) [@Apexcodes](https://forum.kirupa.com/u/Apexcodes)\
**Post date:** [November 14, 2026, 5:55am UTC](https://forum.kirupa.com/t/why-does-z-index-sometimes-seem-to-do-nothing/684025/1 "2026-11-14T05:55:29Z")

</div>

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:

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

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

```

```auto
.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?