zfb
GitHub リポジトリ

検索したい単語を入力

いつでも検索バーを開ける

重なり順

範囲付き整数、auto、設定済みトークンで重なり順を設定します。

同じ stacking context 内で重なる位置指定要素の前後関係を z-index で決めます。要素が同じ context に属する場合、大きい数値が小さい数値より手前に描画されます。

クラスと CSS の早見表

クラスの例期待される宣言
z-10z-index: 10;
z-autoz-index: auto;
z-0z-index: 0;
z-dialogz-index: var(--zw-z-dialog);
-z-[1]z-index: -1;
例の設定

すべてのプレビューは spec 1、reset "none"、strict モード、spacingUnit "0.25rem"、ブレークポイントなしを明示した設定から始まります。数値の spacing はこの単位を掛けて解決し、Tailwind のテーマは継承しません。wind-demo クラスはデモ用の自作スタイルで、HTML と一緒に CSS を確認できます。

使い方の例

カードを重ねる

3つの箱は relative 親を共有します。z-20 は markup 上で先にあっても z-10 と z-0 より手前に描画されます。

カードを重ねる
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;
}
この例の設定
{
  "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"
      ]
    }
  }
}
デモ用の自作 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; }

レイヤー名を付ける

z-dialog は明示した tokens.zIndices.dialog の値を使います。-z-[1] は任意の負値を示し、z-auto は自動の積み重なりに戻します。

レイヤー名を付ける
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);
}
この例の設定
{
  "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"
      ]
    }
  }
}
デモ用の自作 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; }

任意値と名前付きの値

整数、-z-10 や -z-[1] のような負の値、auto、tokens.zIndices の名前付きトークン、z-[42] のような CSS 任意値に対応します。角括弧の外側に負の接頭辞を置きます。角括弧内に符号付き数値を置く書き方は拒否されます。このプレビューは tokens.zIndices.dialog に 30 を設定し、z-dialog という役割名で参照します。z-index は要素を移動せず、祖先の stacking context を必ずしも越えません。

関連ガイド: ユーティリティの文法 · バリアント

カタログの詳細

z

フィールド値
カタログ識別子v1.z
クラスパターンz-<suffix>
文法{"acceptedKinds":["keyword","token","integer","arbitrary"],"arbitraryProperty":"z-index","allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値1
トークンカテゴリzIndices
負の値の規則allowed
競合グループと順位z-index (14)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティz-index

受け入れる値

種類接尾辞出力される値
keyword"auto""auto"

宣言テンプレート

プロパティ値の種類固定値
z-indexresolvednull

カタログの例

クラスの例期待される宣言
z-0z-index: 0

Revision History

作成更新