View on GitHub
Z-index
儘管 Z-index 不是 Bootstrap 網格系統的一部分,在我們的元件是如何相互重疊和互動的方面它扮演了重要角色。
部分 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 狀態上,我們使用 1
、2
、或 3
的低個位數 z-index
數值。在 hover/focus/active 狀態時,我們將特定元素顯示至最前方,並讓它們具有更高 z-index
數值,以在同級元素之上顯示它們的邊框。