Tailwind CSS Z-Index

Z-Index

用于控制元素的堆棧順序的功能類。

使用方法

在 Tailwind 中使用 ?z-{index}? 功能類控制一個(gè)元素的堆棧順序（或三維定位），使得與其顯示順序無(wú)關(guān)。

<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>

響應(yīng)式

要在特定的斷點(diǎn)處控制元素的 z-index，可在任何現(xiàn)有的 z-index 功能類前添加 ?{screen}:? 前綴。例如，使用 ?md:z-50? 來(lái)只在中等尺寸及以上的屏幕應(yīng)用 ?z-50? 功能類。

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

了解更多關(guān)于 Tailwind 響應(yīng)式設(shè)計(jì)功能的信息，查看 響應(yīng)式設(shè)計(jì) 文檔。

自定義

Z-Index 范圍

默認(rèn)情況下，Tailwind 提供六個(gè)數(shù)字 ?z-index? 實(shí)用程序和一個(gè)自動(dòng)實(shí)用程序。您可以通過(guò)編輯 Tailwind 配置的 ?theme.zIndex? 部分來(lái)更改、添加或刪除這些內(nèi)容。(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',
      }
    }
  }

負(fù)值

如果您想添加任何負(fù)的 z-index 類，在配置文件中的鍵前加上破折號(hào)，其形式與 Tailwind 的 負(fù)外邊距 類相同。

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

Tailwind 很聰明，當(dāng)它看到前面的破折號(hào)時(shí)，會(huì)生成像 ?-z-10? 這樣的類，而不是像您可能期望的 ?z--10?。

變體

默認(rèn)情況下， 針對(duì) z-index 功能類，只生成 responsive, focus-within and focus 變體。

您可以通過(guò)修改您的 ?tailwind.config.js? 文件中的 ?variants ?部分中的 ?zIndex ?屬性來(lái)控制為 z-index 功能生成哪些變體。

例如，這個(gè)配置也將生成 hover and active 變體:

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

禁用

如果您不打算在您的項(xiàng)目中使用 z-index 功能，您可以通過(guò)在配置文件的 ?corePlugins ?部分將 ?zIndex ?屬性設(shè)置為 ?false ?來(lái)完全禁用它們：

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