Z 指数

几个 Bootstrap 组件使用了 z-index，这是一个通过提供第三轴来排列内容从而帮助控制布局的 CSS 属性。我们在 Bootstrap 中使用了默认的 z-index 缩放，该缩放设计用来正确地对导航、工具提示和弹出框、模态框等进行分层。

🌐 Several Bootstrap components utilize z-index, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale in Bootstrap that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.

这些较高的数值从一个任意的数字开始，足够高且具体，理想情况下可以避免冲突。我们需要在我们分层的组件中—工具提示、弹出框、导航栏、下拉菜单、模态框—使用一组标准的值，这样我们在行为上可以保持相对一致。没有理由我们不能使用 100+ 或 500+。

🌐 These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors. There’s no reason we couldn’t have used 100+ or 500+.

我们不鼓励自定义这些单个值；如果你更改了其中一个，你很可能需要全部更改。

🌐 We don’t encourage customization of these individual values; should you change one, you likely need to change them all.

$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;

为了处理组件内重叠的边框（例如输入组中的按钮和输入框），我们在默认、悬停和激活状态下使用低单个位数的 1、2 和 3 的 z-index 值。在悬停/聚焦/激活时，我们使用更高的 z-index 值将特定元素置于前面，以显示其边框覆盖在兄弟元素之上。

🌐 To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit z-index values of 1, 2, and 3 for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher z-index value to show their border over the sibling elements.