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>

打印页面