Added in v5.3
View on GitHub
层级（Z-index）
使用我们的底层 z-index 工具，可快速更改元素或组件的堆栈级别。
On this page
示例
使用 z-index 工具将元素堆叠在一起。需要一个除 static 以外的 position 值，该值可通过自定义样式或使用我们的 position utilities 的设置。
我们将这些 “低级”
z-index实用程序称为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 叠加组件–下拉、模态、offcanvas、popover、toast 和 tooltip–都有各自的 z-index 值，以确保在界面的不同 z-index 之间获得可用的体验。
请参阅z-index 布局页面了解它们。
组件方法
在某些组件中，我们使用底层的 z-index 值来管理相互重叠的重复元素（如按钮组中的按钮或列表组中的项目）。
了解我们的z-index 方法。
CSS
Sass 映射
自定义 Sass 映射，更改可用值和生成的实用程序。
$zindex-levels: (
n1: -1,
0: 0,
1: 1,
2: 2,
3: 3
);
Sass utilities API
位置实用程序在 scss/_utilities.scss 中的实用程序 API 中声明。了解如何使用实用程序 API
"z-index": (
property: z-index,
class: z,
values: $zindex-levels,
)