虽然Z-index不是Bootstrap网格系统的一部分,但它在组件之间如何重叠和交互方面起着重要作用。

一些引导组件利用了 z-index,这是一个CSS属性,它通过提供第三个轴来安排内容来帮助控制布局。我们在Bootstrap中使用了默认的z-index scale,它被设计用于正确地分层导航,工具提示和弹出窗口,模式,等等。

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

我们不建议改变这些单独的值;如果你更改一个值,可能需要更改所有值。

$zindex-dropdown:                   1000;
$zindex-sticky:                     1020;
$zindex-fixed:                      1030;
$zindex-modal-backdrop:             1040;
$zindex-modal:                      1050;
$zindex-popover:                    1060;
$zindex-tooltip:                    1070;

为了处理组件中的重叠边界(例如,输入组中的按钮和输入),我们使用低个位数的 z-index值, 1,2, 和 3 作为默认状态、悬停状态和活动状态。在hover/focus/active中,我们使用更高的 z-index 值将特定元素放到最前面,以显示它们在同级元素上的边界。