z-index

例

基本的な例

z-<number> ユーティリティ（z-10 や z-50 など）を使用して、要素のスタック順序（または3次元位置）を、表示順序に関係なく制御します。

<div class="z-40 ...">05</div>
<div class="z-30 ...">04</div>
<div class="z-20 ...">03</div>
<div class="z-10 ...">02</div>
<div class="z-0 ...">01</div>

負の値の使用

負の z-index 値を使用するには、クラス名の先頭にダッシュを付けて負の値に変換します。

<div class="...">05</div>
<div class="...">04</div>
<div class="-z-10 ...">03</div>
<div class="...">02</div>
<div class="...">01</div>

カスタム値の使用

以下を使用してください z-[<value>] 構文 設定するにはスタック順序完全にカスタムの値に基づいて

<div class="z-[calc(var(--index)+1)] ...">
  <!-- ... -->
</div>

CSS 変数の場合は、以下も使用できます。 z-(<custom-property>) 構文

<div class="z-(--my-z) ...">
  <!-- ... -->
</div>

これは単なるショートハンドです z-[var(<custom-property>)] var() 関数を自動的に追加します。

レスポンシブデザイン

プレフィックスa z-index ユーティリティ md: のようなブレークポイントバリアントを付けて、ユーティリティを適用する対象をミディアム スクリーンサイズ以上にする

<div class="z-0 md:z-50 ...">
  <!-- ... -->
</div>

バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。