Z index

Set stacking order with a bounded integer, an auto value, or a configured token.

Use z-index to order overlapping positioned boxes within their stacking context. A larger number paints above a smaller one when the elements participate in the same context.

Quick reference

Example class	Expected declarations
`z-10`	`z-index: 10;`
`z-auto`	`z-index: auto;`
`z-0`	`z-index: 0;`
`z-dialog`	`z-index: var(--zw-z-dialog);`
`-z-[1]`	`z-index: -1;`

Example setup

Every preview explicitly starts from spec 1, reset "none", strict mode, spacingUnit "0.25rem", and no breakpoints. Numeric spacing values multiply that unit; no Tailwind theme is inherited. wind-demo classes are authored presentation scaffolding, with their CSS shown beside the exact HTML source.

Examples in use

Layer overlapping cards

The boxes share a relative parent; z-20 paints above z-10 and z-0 even though it appears earlier in the markup.

Layer overlapping cards

HTML

<div class="wind-demo">
  <p class="wind-demo-note">All three boxes share one positioned containing block. The higher stack level appears on top.</p>
  <div class="wind-demo-frame relative w-72 h-36">
    <div class="absolute top-2 left-2 z-0 size-16 wind-demo-tile">z-0</div>
    <div class="absolute top-6 left-8 z-10 size-16 wind-demo-alt">z-10</div>
    <div class="absolute top-10 left-14 z-20 size-16 wind-demo-dark">z-20</div>
  </div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-alt {
  border-color: #b39761;
  background: #efe5cb;
  color: #483a1d;
}

.wind-demo-dark {
  background: #34465c;
  color: #fff;
  border-color: #34465c;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.left-14 {
  left: 3.5rem;
}
.left-2 {
  left: 0.5rem;
}
.left-8 {
  left: 2rem;
}
.top-10 {
  top: 2.5rem;
}
.top-2 {
  top: 0.5rem;
}
.top-6 {
  top: 1.5rem;
}
.size-16 {
  width: 4rem;
  height: 4rem;
}
.h-36 {
  height: 9rem;
}
.w-72 {
  width: 18rem;
}
.z-0 {
  z-index: 0;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem"
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-alt": true,
      "wind-demo-dark": true,
      "wind-demo-frame": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "absolute",
        "h-36",
        "left-14",
        "left-2",
        "left-8",
        "relative",
        "size-16",
        "top-10",
        "top-2",
        "top-6",
        "w-72",
        "z-0",
        "z-10",
        "z-20"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-alt { border-color: #b39761; background: #efe5cb; color: #483a1d; }
.wind-demo-dark { background: #34465c; color: #fff; border-color: #34465c; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

Name an overlay layer

z-dialog reads the explicitly configured tokens.zIndices.dialog value. -z-[1] demonstrates an arbitrary negative value, while z-auto returns to the automatic stack level.

Name an overlay layer

HTML

<div class="wind-demo">
  <p class="wind-demo-note">A named layer can document the role of an overlay.</p>
  <div class="wind-demo-frame relative z-0 w-72 h-36">
    <div class="absolute top-4 left-4 size-16 -z-[1] wind-demo-muted">negative</div>
    <div class="absolute top-8 left-10 z-dialog size-16 wind-demo-highlight">dialog</div>
    <div class="absolute bottom-2 right-2 z-auto wind-demo-tile">auto</div>
  </div>
</div>

CSS

@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-spacing-unit: .25rem;
    --zw-z-dialog: 30;
  }
}
.wind-demo {
  font: 14px / 1.45 system-ui, sans-serif;
  color: #203046;
}

.wind-demo-frame {
  border: 1px solid #9aaabd;
  background: #f8fafc;
  padding: .75rem;
}

.wind-demo-highlight {
  background: #f2d794;
  color: #493810;
  border: 1px solid #b39761;
  text-align: center;
}

.wind-demo-muted {
  background: #eef1f4;
  color: #64758a;
  border: 1px solid #cbd3dc;
}

.wind-demo-note {
  color: #53677f;
  font-size: .875rem;
}

.wind-demo-tile {
  border: 1px solid #849bb3;
  background: #dce8f2;
  color: #203046;
  padding: .5rem;
  text-align: center;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.bottom-2 {
  bottom: 0.5rem;
}
.left-10 {
  left: 2.5rem;
}
.left-4 {
  left: 1rem;
}
.right-2 {
  right: 0.5rem;
}
.top-4 {
  top: 1rem;
}
.top-8 {
  top: 2rem;
}
.size-16 {
  width: 4rem;
  height: 4rem;
}
.h-36 {
  height: 9rem;
}
.w-72 {
  width: 18rem;
}
.-z-\[1\] {
  z-index: -1;
}
.z-0 {
  z-index: 0;
}
.z-auto {
  z-index: auto;
}
.z-dialog {
  z-index: var(--zw-z-dialog);
}

Configuration for this example

{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "zIndices": {
        "dialog": "30"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo": true,
      "wind-demo-frame": true,
      "wind-demo-highlight": true,
      "wind-demo-muted": true,
      "wind-demo-note": true,
      "wind-demo-tile": true
    },
    "safelist": {
      "docs-preview": [
        "-z-[1]",
        "absolute",
        "bottom-2",
        "h-36",
        "left-10",
        "left-4",
        "relative",
        "right-2",
        "size-16",
        "top-4",
        "top-8",
        "w-72",
        "z-0",
        "z-auto",
        "z-dialog"
      ]
    }
  }
}

Authored demonstration CSS

.wind-demo { font: 14px/1.45 system-ui, sans-serif; color: #203046; }
.wind-demo-frame { border: 1px solid #9aaabd; background: #f8fafc; padding: 0.75rem; }
.wind-demo-highlight { background: #f2d794; color: #493810; border: 1px solid #b39761; text-align: center; }
.wind-demo-muted { background: #eef1f4; color: #64758a; border: 1px solid #cbd3dc; }
.wind-demo-note { color: #53677f; font-size: 0.875rem; }
.wind-demo-tile { border: 1px solid #849bb3; background: #dce8f2; color: #203046; padding: 0.5rem; text-align: center; }

Custom and named values

Integer values, negative forms such as -z-10 and -z-[1], auto, named tokens in tokens.zIndices, and arbitrary CSS values such as z-[42] are supported. Put the negative prefix before the bracketed value; a signed number inside brackets is rejected. This preview declares tokens.zIndices.dialog as 30, so z-dialog is a readable project layer name. z-index does not move an element or necessarily escape an ancestor stacking context.

Related guides: Utility grammar · Variants

Catalog details

z

Field	Value
Catalog identifier	`v1.z`
Class pattern	`z-<suffix>`
Grammar	`{"acceptedKinds":["keyword","token","integer","arbitrary"],"arbitraryProperty":"z-index","allowsFractionSlash":false,"allowsColorOpacity":false}`
Accepted values	`1`
Token categories	`zIndices`
Negative-value policy	`allowed`
Conflict group and rank	`z-index` (`14`)
Order rank	`0`
Selector shape	`ownElement`
Spec version	`1`
Emitter properties	`z-index`

Accepted values

Kind	Suffix	Emitted value
`keyword`	`"auto"`	`"auto"`

Declaration templates

Property	Value kind	Fixed value
`z-index`	`resolved`	`null`

Catalog examples

Example class	Expected declarations
`z-0`	`z-index: 0`

Z index

Quick reference

Examples in use

Layer overlapping cards

Name an overlay layer

Custom and named values

z

Accepted values

Declaration templates

Catalog examples

Revision History