堆疊順序（Z-index）

範例（Example）

使用 z-index 工具程式將元素堆疊在彼此之上。需要一個非 static 的 position 值，可以使用自訂樣式或我們的定位工具程式來設定。

<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>

覆蓋層（Overlays）

Bootstrap 覆蓋層元件——下拉選單、互動視窗、側邊面板、彈出提示框、通知訊息和工具提示框——都有自己的 z-index 值，以確保介面中競爭「層」的可用體驗。

請在 z-index 版面配置頁面中閱讀相關內容。

元件方法（Component approach）

在某些元件上，我們使用低階 z-index 值來管理彼此重疊的重複元素（如按鈕群組中的按鈕或列表群組中的項目）。

了解我們的 z-index 方法。

CSS

Sass maps

自訂此 Sass map 以變更可用值和產生的工具程式。

$zindex-levels: (
  n1: -1,
  0: 0,
  1: 1,
  2: 2,
  3: 3
);

Sass utilities API

Z-index 通用類別在 scss/_utilities.scss 中的 utilities API 中宣告。了解如何使用 utilities API。

"z-index": (
  property: z-index,
  class: z,
  values: $zindex-levels,
)