「及時」模式:全新世代的 Tailwind CSS
Tailwind CSS on GitHub

Z-Index

控制元素堆疊順序的功能

Default class reference

Class
屬性
z-0z-index: 0;
z-10z-index: 10;
z-20z-index: 20;
z-30z-index: 30;
z-40z-index: 40;
z-50z-index: 50;
z-autoz-index: auto;

使用方式

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

5
4
3
2
1
<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預設提供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.jsvariants 區塊中變更 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,
    }
  }