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

雖然不是 Bootstrap 網格系統的一部分,但 z 軸索引在我們的元件如何疊加和彼此互動方面扮演著重要的角色。

多個 Bootstrap 元件使用 z-index,這是一個 CSS 屬性,透過提供第三個軸來排列內容,有助於控制版面配置。我們在 Bootstrap 中使用預設的 z 軸索引比例,其設計目的是適當地分層導覽、工具提示和彈出提示、對話方塊等。

這些較高的值從一個任意數字開始,這個數字夠高且夠具體,理想上可以避免衝突。我們需要在我們的分層元件(工具提示、彈出提示、導覽列、下拉式選單、對話方塊)中使用這些值的標準集合,這樣我們才能在行為上保持合理的一致性。我們沒有理由不能使用 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 值將特定元素帶到最前,以顯示它們的邊框在兄弟元素之上。