# stylelint-z-index-value-constraint

> Stylelint rule for setting minimum and maximum constraint value for z-index.

Latest version **2.0.0** (published 2026-01-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install stylelint-z-index-value-constraint
pnpm add stylelint-z-index-value-constraint
yarn add stylelint-z-index-value-constraint
bun add stylelint-z-index-value-constraint
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2026-01-25 |
| First published | 2018-03-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=20.19.0 |
| Dependencies | 0 |
| Unpacked size | 8.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 19 |
| Author | Krister Kari |
| Maintainers | kristerkari |
| Keywords | css, less, lint, linter, scss, stylelint, stylelint-plugin, sugarss, z-index |

## Links

- npm: https://www.npmjs.com/package/stylelint-z-index-value-constraint
- Repository: https://github.com/kristerkari/stylelint-z-index-value-constraint
- Homepage: https://github.com/kristerkari/stylelint-z-index-value-constraint#readme
- Issues: https://github.com/kristerkari/stylelint-z-index-value-constraint/issues
- npm.io page: https://npm.io/package/stylelint-z-index-value-constraint

## Alternatives

- [eslint-plugin-sonarjs](https://npm.io/package/eslint-plugin-sonarjs.md) — 2.9M weekly downloads
- [eslint-config-expo](https://npm.io/package/eslint-config-expo.md) — 1.5M weekly downloads
- [@matter/protocol](https://npm.io/package/@matter/protocol.md) — 63.5K weekly downloads
- [@eventcatalog/linter](https://npm.io/package/@eventcatalog/linter.md) — 24.8K weekly downloads
- [@pandacss/eslint-plugin](https://npm.io/package/@pandacss/eslint-plugin.md) — 18.7K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2026-01-25
- 1.4.0 — 2024-02-23
- 1.3.0 — 2023-02-12
- 1.2.0 — 2021-12-01
- 1.1.0 — 2019-04-19
- 1.0.0 — 2018-03-08

## README

# stylelint-z-index-value-constraint

[![NPM version](https://img.shields.io/npm/v/stylelint-z-index-value-constraint.svg)](https://www.npmjs.com/package/stylelint-z-index-value-constraint)
[![Build Status](https://github.com/kristerkari/stylelint-z-index-value-constraint/workflows/Tests/badge.svg)](https://github.com/kristerkari/stylelint-z-index-value-constraint/actions?workflow=Tests)
[![Downloads per month](https://img.shields.io/npm/dm/stylelint-z-index-value-constraint.svg)](http://npmcharts.com/compare/stylelint-z-index-value-constraint)
[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)

Stylelint rule for setting minimum and maximum constraint value for z-index.

This is a fork of [niksy/stylelint-number-z-index-constraint](https://github.com/niksy/stylelint-number-z-index-constraint) plugin.

## Install

```sh
npm install stylelint-z-index-value-constraint --save-dev
```

or

```sh
yarn add stylelint-z-index-value-constraint --dev
```

## Usage

Add this config to your `.stylelintrc`:

```
{
  "plugins": ["stylelint-z-index-value-constraint"],
  "rules": {
    "plugin/z-index-value-constraint": {
      "min": 1,
      "max": 10
    }
  }
}
```

## Details

```css
a {
  z-index: 10;
}
/**        ↑
 * This number */
```

From [CSS Tricks article](https://css-tricks.com/handling-z-index/):

> It's fairly common to see people number in the hundreds with z-index in web design too. The idea being that you could slip something in between later if need be, which you couldn't if you did 1, 2, 3, etc, because z-index doesn't support decimals.

This rule also handles negative values.

### Options

#### `{ min: 10 }`

The following patterns are considered warnings:

```css
a {
  z-index: 9;
}
input {
  z-index: 2;
}
```

```css
a {
  z-index: -9;
}
input {
  z-index: -2;
}
```

The following patterns are _not_ considered warnings:

```css
a {
  z-index: 10;
}
input {
  z-index: 25;
}
```

```css
a {
  z-index: -10;
}
input {
  z-index: -25;
}
```

#### `{ max: 9999 }`

The following patterns are considered warnings:

```css
a {
  z-index: 10000;
}
input {
  z-index: 200000;
}
```

```css
a {
  z-index: -10000;
}
input {
  z-index: -200000;
}
```

The following patterns are _not_ considered warnings:

```css
a {
  z-index: 9999;
}
input {
  z-index: 8000;
}
```

```css
a {
  z-index: -9999;
}
input {
  z-index: -8000;
}
```

## Optional options

### `ignoreValues: ["number"]`

#### `{ max: 10 }, { ignoreValues: [11, 20] }`

The following patterns are considered warnings:

```css
a {
  z-index: 12;
}
input {
  z-index: 19;
}
```

The following patterns are _not_ considered warnings:

```css
a {
  z-index: 11;
}
input {
  z-index: 20;
}
```

## Dependencies

This plugin has only [stylelint](https://github.com/stylelint/stylelint) as a dependency.

---

## License

MIT

---
_Source: https://npm.io/package/stylelint-z-index-value-constraint · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._