Fix z-index not working

by

CSS Fix

Fix z-index not working without guessing bigger numbers.

If your dropdown, modal, tooltip, popover, or sticky UI is hiding behind something else, the problem is usually not the number itself. It is usually a stacking context, missing positioning, clipping, or a parent element quietly creating a different layer system.

Browse CSS Fixes See the Difference
  • Classic front-end bug
  • Usually not the number
  • Often caused by parent structure

What the bug looks like

A modal hides behind the header, a dropdown goes under another section, or a tooltip appears cut off even though the z-index value looks “high enough.”

Why it happens

z-index only works inside the stacking rules of the current context. The number alone does not override the browser’s layer model.

What usually fixes it

Check positioning first, then inspect parent layers, transforms, and overflow. The real fix is usually structural, not z-index: 999999.

Why z-index bugs feel so misleading

z-index feels simple on the surface. Bigger number should mean higher layer. But the browser does not compare every element against every other element globally. It compares them inside stacking contexts.

That is why a child with a huge z-index can still lose to another element with a smaller number. It is not losing the math. It is losing the context.

Common signs the problem is not the number

The value keeps increasing, but nothing changes That usually means the element is trapped inside the wrong stacking context.
The UI looks cut off, not just hidden behind That often points to overflow clipping instead of true layer ordering.
Only one part of the interface misbehaves A transformed or isolated parent is often the real source of the bug.

Recommended fix

Correct layering start

Start with the simplest correct layering setup: a positioned parent and a positioned child with a meaningful z-index. 

.card {
  position: relative;
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
}

Common broken version

Number-only thinking

This is one of the most common patterns people expect to work. 

.dropdown {
  z-index: 9999;
}

Why this fails

A giant z-index often does nothing if the element is not positioned or if it is trapped inside a lower stacking context created higher in the DOM.

Simple rule: if you are increasing the number over and over, you are probably fixing the wrong thing.

Positioning was never set

In many cases, z-index needs a positioning context before the browser will layer the element the way you expect.

A parent created a new stacking context

Properties like transform, opacity, and filter can quietly isolate the child into a different layer system.

Clipping is pretending to be layering

Sometimes the element is actually on top, but a parent with overflow is physically cutting it off from view.

Fast practical rule

z-index is not a global “win every layer battle” property. It only works inside the stacking context the element lives in. If the parent creates the wrong layer system, the child cannot escape by number alone.

Debug checklist

  • Check whether the element has a positioning context such as relative, absolute, fixed, or sticky.
  • Inspect parent elements for transform, opacity, filter, or isolation.
  • Look for overflow: hidden or overflow: auto clipping the child.
  • Confirm whether the bug is layering or clipping. They are not the same problem.
  • Avoid blindly escalating from 10 to 1000 to 999999 without checking the parent structure first.
Best first move Add positioning intentionally and inspect the parent chain before touching the z-index value again.
Most overlooked cause A transformed parent often explains why a supposedly “higher” child still loses.
Better mindset If a modal or dropdown must escape layout constraints, it may belong higher in the DOM or inside a dedicated layer container.

Overflow can fake a z-index bug

Sometimes the element is actually on top, but a parent with overflow: hidden cuts it off visually. That is not a stacking failure. It is clipping.

If the layer seems correct but part of the UI disappears, inspect overflow before blaming z-index.

Example of clipping

Not a layer battle 
.panel {
  position: relative;
  overflow: hidden;
}

.tooltip {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
}

Final takeaway

z-index bugs are rarely solved by ego numbers. They are solved by understanding which context the element lives in, whether it is positioned correctly, and whether a parent is creating clipping or a new layer system.

When you fix the structure around the element instead of just inflating the number, the whole interface becomes more predictable and easier to maintain.

Want more fixes like this?

Browse more CSS debugging guides or go straight to the full FrontFixer library.

Browse CSS Fixes All Fixes

Leave a Comment