Skip to main content Skip to docs navigation

虽然z-index不是Bootstrap网格系统的一部分,但它在我们的组件如何相互覆盖和交互方面发挥着重要作用。

几个Bootstrap组件使用z-index,这是CSS属性,通过提供第三个轴来排列内容来帮助控制布局。 我们在Bootstrap中使用了默认的z-index 数值指标,该指标旨在正确地对导航、工具提示和弹出窗口、模式等进行分层。

这些较高的值从任意数字开始,足够高且特定,以理想地避免冲突。 我们需要一套标准的分层组件——工具提示、弹出窗口、导航栏、下拉菜单、模态——这样我们就可以在行为上保持合理的一致性。 我们没有理由不使用100+或500+。

我们不鼓励定制这些个性化的值;如果你改变一个值,你可能需要改变所有值。

$zindex-dropdown:                   1000;
$zindex-sticky:                     1020;
$zindex-fixed:                      1030;
$zindex-offcanvas-backdrop:         1040;
$zindex-offcanvas:                  1045;
$zindex-modal-backdrop:             1050;
$zindex-modal:                      1055;
$zindex-popover:                    1070;
$zindex-tooltip:                    1080;
$zindex-toast:                      1090;

为了处理组件内的重叠边界(例如,输入组中的按钮和输入),我们使用低个位数的z-index123作为默认状态、悬停状态和活动状态。 在悬停/聚焦/活动时,我们将具有更高z-index值的特定元素带到最前面,以显示其在同级元素上的边界。