Tailwind CSS Z-Index

2022-08-08 10:09 更新

Z-Index

用于控制元素的堆栈顺序的功能类。

Class
Properties
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 中使用 ​z-{index}​ 功能类控制一个元素的堆栈顺序(或三维定位),使得与其显示顺序无关。


<div class="z-40 ...">5</div>
<div class="z-30 ...">4</div>
<div class="z-20 ...">3</div>
<div class="z-10 ...">2</div>
<div class="z-0 ...">1</div>

响应式

要在特定的断点处控制元素的 z-index,可在任何现有的 z-index 功能类前添加 ​{screen}:​ 前缀。例如,使用 ​md:z-50​ 来只在中等尺寸及以上的屏幕应用 ​z-50​ 功能类。

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

了解更多关于 Tailwind 响应式设计功能的信息,查看 响应式设计 文档。

自定义

Z-Index 范围

默认情况下,Tailwind 提供六个数字 ​z-index​ 实用程序和一个自动实用程序。您可以通过编辑 Tailwind 配置的 ​theme.zIndex​ 部分来更改、添加或删除这些内容。(By default, Tailwind provides six numeric z-index utilities and an auto utility. You change, add, or remove these by editing the theme.zIndex section of your Tailwind config.)

  // tailwind.config.js
  module.exports = {
    theme: {
      zIndex: {
        '0': 0,
       '10': 10,
       '20': 20,
       '30': 30,
       '40': 40,
       '50': 50,
       '25': 25,
       '50': 50,
       '75': 75,
       '100': 100,
        'auto': 'auto',
      }
    }
  }

负值

如果您想添加任何负的 z-index 类,在配置文件中的键前加上破折号,其形式与 Tailwind 的 负外边距 类相同。

  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        zIndex: {
         '-10': '-10',
        }
      }
    }
  }

Tailwind 很聪明,当它看到前面的破折号时,会生成像 ​-z-10​ 这样的类,而不是像您可能期望的 ​z--10​。

变体

默认情况下, 针对 z-index 功能类,只生成 responsive, focus-within and focus 变体。

您可以通过修改您的 ​tailwind.config.js​ 文件中的 ​variants ​部分中的 ​zIndex ​属性来控制为 z-index 功能生成哪些变体。

例如,这个配置也将生成 hover and active 变体:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
       zIndex: ['hover', 'active'],
      }
    }
  }

禁用

如果您不打算在您的项目中使用 z-index 功能,您可以通过在配置文件的 ​corePlugins ​部分将 ​zIndex ​属性设置为 ​false ​来完全禁用它们:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
     zIndex: false,
    }
  }


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号