---
title: "Many distinct z-index values (lint/z-index-soup)"
description: "lint/z-index-soup: A dozen ad-hoc z-index values (10, 20, 50, 999, 9999…) means stacking is managed by escalation; the next overlay needs a bigger number and…"
canonical: https://void-design.vercel.app/rules/lint/z-index-soup
lastModified: 2026-09-16
---

# Many distinct z-index values

`lint/z-index-soup` · severity **info** · category Lint · detected by `void lint` and `void audit`

## Why it matters

A dozen ad-hoc z-index values (10, 20, 50, 999, 9999…) means stacking is managed by escalation; the next overlay needs a bigger number and popovers end up under headers.

## How to fix it

Define a small layer scale as tokens (e.g. base 0, sticky 10, dropdown 20, overlay 30, modal 40, toast 50) and use `isolation: isolate` to create local stacking contexts.

## Example

```css
@theme { --z-sticky: 10; --z-overlay: 30; --z-modal: 40; --z-toast: 50; }
```
```tsx
<header className="z-(--z-sticky)" />
```

## More lint rules

`void lint` reports 67 rules in this category. Static source checks with no browser: Tailwind v4 silent failures, Next.js 16 API traps, React render-body bugs, accessibility markup, SEO files and motion hygiene.

- `no-reduced-motion` Animations present but no `prefers-reduced-motion` handling anywhere — [lint/no-reduced-motion](https://void-design.vercel.app/rules/lint/no-reduced-motion)
- `overflow-x-hidden-sticky` `overflow-x: hidden` on html/body/root wrapper breaks `position: sticky` — [lint/overflow-x-hidden-sticky](https://void-design.vercel.app/rules/lint/overflow-x-hidden-sticky)
- `vh-hero` Hero sized with `100vh` / `h-screen` — [lint/vh-hero](https://void-design.vercel.app/rules/lint/vh-hero)
- `will-change-static` `will-change` applied statically to many elements — [lint/will-change-static](https://void-design.vercel.app/rules/lint/will-change-static)
- `hardcoded-colors` Hard-coded colors in components instead of tokens — [lint/hardcoded-colors](https://void-design.vercel.app/rules/lint/hardcoded-colors)
- `missing-metadata` Page has no `metadata` / `generateMetadata` and inherits only the root title — [lint/missing-metadata](https://void-design.vercel.app/rules/lint/missing-metadata)
- `missing-metadata-base` Root layout metadata has no `metadataBase` — [lint/missing-metadata-base](https://void-design.vercel.app/rules/lint/missing-metadata-base)
- `canonical-in-root-layout` Canonical URL set in the root layout — [lint/canonical-in-root-layout](https://void-design.vercel.app/rules/lint/canonical-in-root-layout)

Detected by `void lint` and `void audit`. Explain it in a terminal: `void rules lint/z-index-soup`