Tailwind CSS - Z軸索引

Tailwind CSS Z 軸索引是一個實用程式類，提供控制元素堆疊順序的方法。Z 軸索引較高的元素將位於Z 軸索引較低的元素之上。

Tailwind CSS Z 軸索引類

以下是Tailwind CSS Z 軸索引類的列表，這些類是用於控制元素堆疊順序的實用程式。

類名	CSS 屬性
z-0	z-index: 0;
z-10	z-index: 10;
z-20	z-index: 20;
z-30	z-index: 30;
z-40	z-index: 40;
z-50	z-index: 50;
z-auto	z-index: auto;

Tailwind CSS Z 軸索引類的功能

Z-*：此類用於根據其在三維平面上的堆疊順序顯示元素。這裡的{*}指定了從 0 到 50 的順序值範圍，以 10 為步長遞增。
Z-Auto：此類替換 CSS Z-index: auto; 屬性，該屬性指定元素的預設行為，無需建立新的堆疊上下文。

Tailwind CSS Z 軸索引類示例

以下示例將說明 Tailwind CSS Z 軸索引類實用程式。

設定 z-index 以控制堆疊順序

以下示例說明基於較高的Z 軸索引對普通<div>元素的對齊方式。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-3xl mb-3">
        Tailwind CSS Z Index 
    </h2>
    <div class="relative ">
        <div class="bg-lime-600 h-48 w-48 z-10 
                       absolute top-0 left-0"></div>
        <div class="bg-lime-500 h-44 w-44 z-30 
                       absolute top-10 left-12"></div>
        <div class="bg-lime-400 h-40 w-40 z-40 
                       absolute top-20 left-24"></div>
        <div class="bg-lime-300 h-36 w-36 z-50 
                       absolute top-28 left-36"></div>
    </div>
</body>

</html>

使用負 z-index 控制堆疊順序

以下示例說明在元素上使用負Z 軸索引。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-3xl mb-3">
        Tailwind CSS Z Index 
    </h2>
    <div class="relative ">
        <div class="bg-lime-600 h-48 w-48 -z-10 
                       absolute top-0 left-0"></div>
        <div class="bg-lime-500 h-44 w-44 -z-30 
                       absolute top-10 left-12"></div>
        <div class="bg-lime-400 h-40 w-40 -z-40 
                       absolute top-20 left-24"></div>
        <div class="bg-lime-300 h-36 w-36 -z-50 
                       absolute top-28 left-36"></div>
    </div>
</body>

</html>

列印頁面