# 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.

**URL:** https://convertto.tech/t/z-index-visualizer
**Category:** CSS Generators (https://convertto.tech/c/css-generators)
**Privacy:** Runs entirely in the browser; no upload
**Cost:** Free, no sign-up
**Last updated:** 2026-08-01

## Key facts

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

## How to use

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

## FAQ

### 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.

## Related tools

- [CSS Specificity Calculator](https://convertto.tech/t/css-specificity-calculator): Work out a selector's specificity and see which parts contributed what.
- [CSS Border Radius Generator](https://convertto.tech/t/border-radius-generator): Drag eight handles to shape every corner: elliptical radii, inverted corners and squircles.
- [CSS Box Shadow Generator](https://convertto.tech/t/box-shadow-generator): Design a CSS box-shadow with live values for offset, blur, spread and colour.
- [CSS Button Generator](https://convertto.tech/t/css-button-generator): Design a button and copy the CSS, including the hover, active and focus-visible states.
- [CSS Clamp Generator](https://convertto.tech/t/css-clamp-generator): Generate fluid clamp() values that scale smoothly between two viewport widths.
- [CSS Clip Path Generator](https://convertto.tech/t/css-clip-path-generator): Cut an element to a polygon, circle, ellipse or inset, and copy the clip-path.
- [CSS Multi-Column Generator](https://convertto.tech/t/css-columns-generator): Flow text into balanced columns with a rule between them.
- [CSS Cursor Reference & Generator](https://convertto.tech/t/css-cursor-generator): Hover to try every CSS cursor keyword, and copy the one you want.