z-index

z-index

用於控制元素堆疊順序的工具類別。

類別樣式

z-<number>

z-index: <number>;

z-auto

z-index: auto;

z-[<value>]

z-index: <value>;

z-(<custom-property>)

z-index: var(<custom-property>);

範例

使用 z-<number> 實用類別，例如 z-10 和 z-50 來控制元素的堆疊順序（或三維定位），無論其顯示順序如何

<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() 函式。

前綴一個 z-index 實用類別使用斷點變體，例如 md:，僅在medium 螢幕尺寸及以上應用該實用類別

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

了解更多關於在變體文檔中使用變體的信息。