---
title: "Arbitrary z-index (tailwind/arbitrary-z-index)"
description: "z-[9999]-style values escalate into stacking wars between overlays."
url: http://localhost:4173/rules/tailwind/arbitrary-z-index
updated: 2026-11-11
---

# Arbitrary z-index

> `tailwind/arbitrary-z-index` is a vetd rule. It flags: Arbitrary z-index. It runs on every `check`, together with the TypeScript check.

| Fact | Value |
| --- | --- |
| Rule id | `tailwind/arbitrary-z-index` |
| Severity | warning |
| Group | Tailwind CSS |
| Tags | correctness |

## Why it matters

z-[9999]-style values escalate into stacking wars between overlays.

## How to fix it

Define a small z-index scale in the theme and use its steps.

## Credit

Based on work by:

- [Josh W. Comeau](https://www.joshwcomeau.com): Argues z-index is an escape hatch and that isolation and stacking contexts beat escalating values.

## References

- [What The Heck, z-index?? • Josh W. Comeau](https://www.joshwcomeau.com/css/stacking-contexts/), Josh W. Comeau
- [Stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Positioned_layout/Stacking_context), MDN Web Docs

## See it

Demos in the vetd Lab:

- [Isolate, don't raise z-index](http://localhost:4173/lab/josh-comeau/isolate-dont-escalate)

## Get this text from vetd

MCP: call `explain` with `{ "diagnosticId": "tailwind/arbitrary-z-index" }`. CLI: `npx vetd explain tailwind/arbitrary-z-index`.

---

[All 92 rules](http://localhost:4173/rules.md) · Previous: [`tailwind/hover-capability`](http://localhost:4173/rules/tailwind/hover-capability.md) · Next: [`perf/font-link`](http://localhost:4173/rules/perf/font-link.md)