Z-index · Bootstrap 6.0 中文文档

类名	样式
.z-n1	z-index: -1;
.z-0	z-index: 0;
.z-1	z-index: 1;
.z-2	z-index: 2;
.z-3	z-index: 3;
.z-menu	z-index: 1000;
.z-sticky	z-index: 1010;
.z-fixed	z-index: 1020;
.z-drawer	z-index: 1030;
.z-dialog	z-index: 1040;
.z-popover	z-index: 1050;
.z-tooltip	z-index: 1060;
.z-toast	z-index: 1070;

示例

使用 z-index 用于将元素堆叠在彼此之上的工具类。需要一个 position 除……之外的值 static，可以使用自定义样式或使用我们的定位工具.

低级堆栈

我们将这些称为“低级”z-index工具，因为它们的默认值为 -1 到 3，我们用于重叠组件的布局。高级 z-index 值用于覆盖组件，如对话框和工具提示。

z-3

z-2

z-1

z-0

z-n1

HTML

<div class="z-3 position-absolute p-9 rounded-3"><span>z-3</span></div>
<div class="z-2 position-absolute p-9 rounded-3"><span>z-2</span></div>
<div class="z-1 position-absolute p-9 rounded-3"><span>z-1</span></div>
<div class="z-0 position-absolute p-9 rounded-3"><span>z-0</span></div>
<div class="z-n1 position-absolute p-9 rounded-3"><span>z-n1</span></div>

组件堆栈

组件 z-index 工具用于覆盖组件，例如对话框、弹出框等。所有组件都有对应的类，并且它们的 CSS 变量在各自的组件中开箱即用。

类名	值	CSS 变量
`z-menu`	`1000`	`var(--z-menu)`
`z-sticky`	`1010`	`var(--z-sticky)`
`z-fixed`	`1020`	`var(--z-fixed)`
`z-drawer`	`1030`	`var(--z-drawer)`
`z-dialog`	`1040`	`var(--z-dialog)`
`z-popover`	`1050`	`var(--z-popover)`
`z-tooltip`	`1060`	`var(--z-tooltip)`
`z-toast`	`1070`	`var(--z-toast)`

了解更多关于该组件的信息 z-index 中的值 z-index 布局页面.

覆盖层

Bootstrap 覆盖组件——菜单、对话框、抽屉、弹出框、提示消息和工具提示——都有各自的 z-index 值，以确保在界面的多个“层”竞争时仍能提供可用的体验。

在 z-index 布局页面阅读关于它们的内容。

组件方法

在某些组件上，我们使用我们的低级 z-index 值来管理彼此重叠的重复元素（例如按钮组中的按钮或列表组中的项目）。

了解我们的 z-index 方法。

CSS

Sass map

自定义此 Sass map以更改可用的值和生成的工具。

scss/_config.scss

$zindex-levels: (
  n1: -1,
  0: 0,
  1: 1,
  2: 2,
  3: 3,
  menu: 1000,
  sticky: 1010,
  fixed: 1020,
  drawer: 1030,
  dialog: 1040,
  popover: 1050,
  tooltip: 1060,
  toast: 1070,
);

Sass 工具 API

位置工具在我们的工具 API scss/_utilities.scss 中声明。了解如何使用工具 API。

scss/_utilities.scss

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