层级(Z-index)

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

On this page

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

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

我们不鼓励定制这些数值;如果你更改一个,你可能需要把它们全部更改。

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

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

返回顶部