Added in v5.3 View on GitHub

Z-index

使用我们的低级z-index utilities 可以快速更改元素或组件的堆栈级别。

On this page

实例

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

我们称这些 “low-level” 的z-index实用程序是因为它们的默认值为-1到3，用于重叠组件的布局。 High-level 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>

Overlays

Bootstrap overlay 组件——dropdown, modal, offcanvas, popover, toast和tooltip——都有自己的 z-index 值，以确保与竞争的界面 “层” 之间的可用体验。

在z-indexlayout page中阅读它们。

组件策略

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

了解我们的z-index方法。

CSS

Sass maps

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

scss/_variables.scss

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

Sass utilities API

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

scss/_utilities.scss

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