Z-index

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

在此页

例子

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

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

HTML

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

覆盖

Bootstrap 覆盖组件——下拉选项、模态对话框、offcanvas、弹出窗口、Toast和Tooltips——都有自己的z-index值，以确保与界面的竞争“层”的可用体验。

z-index在布局页面中阅读它们。

组件方法

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

了解我们的z-index方法。

CSS

Sass 映射

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

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