Why a Huge z-index Still Does Not Work

When z-index: 999999 does nothing, the number is usually not the problem. The element is trapped inside a stacking context whose parent sits behind something else.

Once that clicks, z-index stops feeling like a contest to type the largest integer.

The basic rule

Overlapping elements are painted in a defined order. z-index lets eligible elements take a position in that order. A larger value appears above a smaller value within the same stacking context.

.popover {
  position: absolute;
  z-index: 20;
}

.header {
  position: sticky;
  z-index: 10;
}

Here the popover can appear above the header if the two boxes participate in the same context. Elements with the same stack level fall back to painting order, which often means the later element appears above the earlier one.

Stacking contexts are the real boundary

Certain properties create a new stacking context. Common examples include a positioned element with a non-auto z-index, position: fixed or sticky, opacity below 1, transforms, filters, and isolation: isolate.

Children cannot escape their parent’s context:

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

.sidebar__tooltip {
  position: absolute;
  z-index: 999999;
}

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

The tooltip remains in the sidebar’s z-index: 1 world, so it cannot rise above .main. Raising the child again will not help. Change the parent relationship, move the overlay elsewhere in the DOM, or reconsider which contexts need a z-index.

Keep the scale small

I prefer named layers over unexplained numbers:

:root {
  --layer-content: 0;
  --layer-header: 10;
  --layer-popover: 20;
  --layer-modal: 30;
}

This documents intent and leaves room between layers. It does not solve stacking contexts, but it prevents a codebase full of 9999, 99999, and the inevitable 999999.

Use browser DevTools to inspect the ancestor chain when a layer behaves strangely. The fix is usually to remove an accidental stacking context or put the overlay in the right one. The giant number was only shouting from the wrong room.