Bootstrap5 Z-index

半兽人 发表于: 2020-07-27   最后更新时间: 2023-06-12 17:55:50  
{{totalSubscript}} 订阅, 3,763 游览

Z-index

尽管z-indexes不是Bootstrap网格系统的一部分,但它在我们的组件如何相互覆盖和交互起着非常重要的作用。

一些Bootstrap组件利用z-index这个CSS属性,它通过提供第三个axis轴来安排内容来帮助控制布局。 我们在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;

为了处理组件内的重叠边框(例如输入组中的buttons和inputs),我们使用低个位数的z-index值分别为默认状态,悬停状态和活动状态,分别为123。 在悬停/焦点/活动(hover/focus/active)时,我们将具有更高z-index值的特定元素带到最前沿,以显示它们在同级元素上的边框。

更新于 2023-06-12
在线,7小时前登录

查看bootstrap5更多相关的文章或提一个关于bootstrap5的问题,也可以与我们一起分享文章