Z-Index

使用方式

無論原先如何顯示，在 Tailwind 裡使用z-{index}功能來控制元素堆疊順序(或3d位置)。

響應式

某些情境下想要控制某元素的 z-index，可在現有 z-index 功能前加上前綴詞 {screen}:。例如：中等以上尺寸螢幕使用 md:z-50 以套用 z-50 功能。

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

更多有關Tailwind響應式設計的特色，可參考 響應式設計 文件。

客製化

Z-Index 數值

Tailwind預設提供6種數字型 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',
      }
    }
  }

負值

如果你想跟 Tailwind 的 negative margin 格式一樣使用負數 z-index 的話，在設定檔的數值前加 ’-’ 即可。

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

當發現開頭是-時, Tailwind聰明到可以幫你產生像-z-10的class, 而不是你可能會預期的z--10。

變化模式

默認情況下, 只有 響應式、focus-within 和 focus 的 z-index 變化模式 (variants) 會產生。

在 tailwind.config.js 的 variants 區塊中變更 zIndex 屬性來決定有哪些變化模式會生成。

舉個例子來說，這個設定將會生成 響應式 和 hover 的變化模式。

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

停用

如果你不打算在專案中使用 z-index 功能，可以在你的設定檔裡的 corePlugins 屬性中將 zIndex 設定為 false 來停用功能：

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