Z-Index

使用方法

在 Tailwind 中使用 z-{index} 功能类控制一个元素的堆栈顺序（或三维定位），使得与其显示顺序无关。

响应式

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

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

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

定制

Z-Index 范围

默认情况下，Tailwind 提供了六个数值的 z-index 功能类和一个 auto 功能类。您可以通过编辑您的 Tailwind 配置中的 theme.zIndex 部分来改变、添加或删除这些功能类。

  // 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 property to false in the corePlugins section of your config file:

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