尽管z-index 不是Bootstrap网格系统的一部分,但在我们的组件如何相互覆盖和交互方面起着重要作用。
在本页面
一些Bootstrap组件利用z-index
,CSS属性通过提供第三个轴来排列内容,从而帮助控制布局。我们在 Bootstrap中使用了一个默认的z-index比例,它被设计用来正确地分层导航、工具提示和弹出窗口、模态等等。
这些较高的值以任意数字开始,该数字足够高且特定,足以理想地避免冲突。 我们需要在我们的分层组件(工具提示,弹出窗口,导航栏,下拉菜单,模式)中使用一组标准的工具,以便我们在行为上可以合理地保持一致。我们没有理由不使用 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
用于默认,悬停状态和活动状态。在悬停/焦点/活动上,我们将具有较高z-index
值的特定元素置于最前列,以显示其在同级元素上的边界。
分享笔记