W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
用于控制元素的堆棧順序的功能類。
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,可在任何現(xiàn)有的 z-index 功能類前添加 ?{screen}:
? 前綴。例如,使用 ?md:z-50
? 來只在中等尺寸及以上的屏幕應用 ?z-50
? 功能類。
<div class="z-0 md:z-50 ...">
<!-- ... -->
</div>
了解更多關于 Tailwind 響應式設計功能的信息,查看 響應式設計 文檔。
默認情況下,Tailwind 提供六個數(shù)字 ?z-index
? 實用程序和一個自動實用程序。您可以通過編輯 Tailwind 配置的 ?theme.zIndex
? 部分來更改、添加或刪除這些內(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',
}
}
}
如果您想添加任何負的 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,
}
}
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: