堆疊順序(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-index 值 1、2 和 3 來表示預設、懸停和啟用狀態。在懸停/焦點/啟用時,我們使用較高的 z-index 值將特定元素帶到最前面,以顯示其邊框在同層元素之上。