Why Is My Z-Index Not Working?

Paste your CSS and find the property that trapped the element in a stacking context.

z-index only orders elements within the same stacking context, and a surprising number of ordinary properties create one: any transform, any filter, opacity below 1, a blend mode, will-change naming one of those, position fixed or sticky, and isolation: isolate. Once an ancestor creates a context, its children are sealed inside it — a child with z-index 9999 still cannot paint above something outside, because the whole subtree is composited as one layer at the ancestor's level. The fix is almost always to raise the ancestor, not the child.

Runs in your browser

Privacy: Runs entirely in your browser — nothing is uploaded
Cost: Free, unlimited, no sign-up

Frequently asked questions

Why is my modal behind the page even with z-index: 9999?

An ancestor is creating a stacking context — usually a transform, a filter, or opacity below 1 on a wrapper. The modal is sealed inside it and cannot escape. Either remove the property, raise the ancestor instead, or render the modal outside that subtree with a portal or the Popover API.

Does z-index work without position?

Not on a static element, no — the property is ignored entirely. It does work on flex and grid children without any position, which is a common source of confusion in the other direction.

Why does opacity: 0.99 change my layering?

Any opacity below 1 creates a stacking context, so 0.99 is functionally different from 1 even though nobody can see the difference. It is the classic accidental trigger.

How to use the z-index & stacking context checker

1Enter or paste your declarations.
2The result appears immediately — copy or download it.

Embed this tool

Put the working z-index & stacking context checker on your own site. It runs in your visitors' browsers exactly as it does here — free, no account, nothing uploaded.

CSS Specificity CalculatorWork out a selector's specificity and see which parts contributed what.CSS Border Radius GeneratorDrag eight handles to shape every corner: elliptical radii, inverted corners and squircles.CSS Box Shadow GeneratorDesign a CSS box-shadow with live values for offset, blur, spread and colour.CSS Button GeneratorDesign a button and copy the CSS, including the hover, active and focus-visible states.CSS Clamp GeneratorGenerate fluid clamp() values that scale smoothly between two viewport widths.CSS Clip Path GeneratorCut an element to a polygon, circle, ellipse or inset, and copy the clip-path.

Last updated 1 Aug 2026

More css generators