已新增至 v5.3 在 GitHub 上檢視
Z-index
使用我們的低階 z-index 輔助工具，快速變更元素或元件的堆疊層級。
在此頁面上
範例
使用 z-index 輔助工具，將元素堆疊在彼此上方。需要使用 position 值，且不能為 static，可以使用自訂樣式設定，或使用我們的 位置輔助工具 設定。
我們稱這些為「低階」
z-index 工具程式，因為它們的預設值為 -1 到 3，我們用於重疊元件的配置。高階 z-index 值用於疊加元件，例如對話框和工具提示。
z-3
z-2
z-1
z-0
z-n1
<div class="z-3 position-absolute p-5 rounded-3"><span>z-3</span></div>
<div class="z-2 position-absolute p-5 rounded-3"><span>z-2</span></div>
<div class="z-1 position-absolute p-5 rounded-3"><span>z-1</span></div>
<div class="z-0 position-absolute p-5 rounded-3"><span>z-0</span></div>
<div class="z-n1 position-absolute p-5 rounded-3"><span>z-n1</span></div>疊加
Bootstrap 疊加元件（下拉式選單、對話框、離畫布、彈出視窗、提示和工具提示）都有自己的 z-index 值，以確保在介面的競爭「圖層」中獲得可用的體驗。
在 z-index 配置頁面 中閱讀相關資訊。
元件方法
在某些元件上，我們使用低階 z-index 值來管理重疊在一起的重複元素（例如按鈕群組中的按鈕或列表群組中的項目）。
瞭解我們的 z-index 方法。
CSS
Sass 對應
自訂此 Sass 對應以變更可用的值和產生的工具程式。
$zindex-levels: (
n1: -1,
0: 0,
1: 1,
2: 2,
3: 3
);
Sass 工具程式 API
位置工具程式在 scss/_utilities.scss 中的工具程式 API 中宣告。 瞭解如何使用工具程式 API。
"z-index": (
property: z-index,
class: z,
values: $zindex-levels,
)