Z-index
雖然不是 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-index
值 1
、2
和 3
。在懸停/焦點/活動時,我們會使用較高的 z-index
值將特定元素帶到最前,以顯示它們的邊框在兄弟元素之上。