跳至主要內容 跳至文件導覽

堆疊順序(Z-index)

雖然不是 Bootstrap 格線系統的一部分,但 z-index 在我們的元件如何重疊和彼此互動方面發揮著重要作用。

多個 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;
$zindex-toast:                      1090;

為了處理元件內的重疊邊框(例如輸入群組中的按鈕和輸入欄位),我們使用低位個位數的 z-index123 來表示預設、懸停和啟用狀態。在懸停/焦點/啟用時,我們使用較高的 z-index 值將特定元素帶到最前面,以顯示其邊框在同層元素之上。