Bits of .NET

Z-index doesn’t work the way most devs think.
It depends on stacking contexts, not numbers.

🔥 The Real Causes

• position: relative creates a new stacking context

• transform creates a new stacking context

• opacity < 1 creates a new stacking context

• Parent stacking contexts override children

You can set z-index: 999999 and STILL not see your element. 😅

✔ The REAL Fix

Ensure the parent has a higher stacking context, not the child.

.parent {
  position: relative;
  z-index: 10;
}
.child {
  position: absolute;
  z-index: 9999;
}

💡 Bonus

Use Chrome DevTools → Layers → visualize stacking contexts.