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
位置工具在我们的工具 API scss/_utilities.scss 中声明。了解如何使用工具 API。
"z-index": (
property: z-index,
class: z,
values: $zindex-levels,
)