跳到主要内容 跳到文档导航

Z-index

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

在此页

例子

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

我们称这些“低级”z-index实用程序是因为它们的默认值为-13,我们将其用于重叠组件的布局。高级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
);