Added in v5.3 在 GitHub 上查看

Z-index

使用我们的低级z-index实用程序快速更改元素或组件的堆栈级别。

当前页

示例

使用z-index实用程序将元素堆叠在一起。需要static以外的position 值，可以使用自定义样式或使用我们的 position 实用程序进行设置。

我们称这些“低级”z-index实用程序，因为它们的默认值为-1到3,，我们将其用于重叠组件的布局。高级z-index 值用于叠加组件，如模态和工具提示。

z-3

z-2

z-1

z-0

z-n1

html

<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覆盖组件（下拉列表、模态、画布外、弹出框、Toast 和工具提示）都有自己的z-index值，以确保与界面的竞争“层”具有可用的体验。

在 z-index layout page 中阅读有关它们的信息。

组件方法

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

了解我们的 z-index 方法。

CSS

Sass 映射

自定义此 Sass 映射以更改可用值和生成的实用程序。

scss/_variables.scss

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

Utilities API

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

scss/_utilities.scss

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