Skip to main content Skip to docs navigation
View on GitHub

Z-index

儘管 Z-index 不是 Bootstrap 網格系統的一部分,在我們的元件是如何相互重疊和互動的方面它扮演了重要角色。

六角學院的 Bootstrap 5 課程上線囉,立即與萬人一同學習最專業、最深入的 Bootstrap 5 課程。

立即上課去

部分 Bootstrap 元件利用 z-index 這個 CSS 屬性,透過提供第三個軸來幫助控制佈局內容。我們在 Bootstrap 利用默認的 z-index 正確的分層導航列、提示工具、彈跳視窗等。

這些較高的數值始於任意數字,需足夠高且特定並能理想的避免衝突。我們需要在我們的分層元件-提示工具、彈跳視窗、導航列、下拉式選單、互動視窗-中使用一組標準的工具,以便我們能保持一致的行為。沒有理由我們不能使用 100+ 或 500+.

我們不鼓勵客製化個人的數值;若您要更改一個,則可能需要更改全部。

$zindex-dropdown:                   1000;
$zindex-sticky:                     1020;
$zindex-fixed:                      1030;
$zindex-offcanvas-backdrop:         1040;
$zindex-offcanvas:                  1045;
$zindex-modal-backdrop:             1050;
$zindex-modal:                      1055;
$zindex-popover:                    1070;
$zindex-tooltip:                    1080;

為了處理元件內的重疊邊框(例如按鈕以及群組內的輸入格),在預設狀態、hover 狀態與 active 狀態上,我們使用 12、或 3 的低個位數 z-index 數值。在 hover/focus/active 狀態時,我們將特定元素顯示至最前方,並讓它們具有更高 z-index 數值,以在同級元素之上顯示它們的邊框。