Bootstrap 5的z-0至z-3工具类需配合position属性（如position-relative）使用，对应z-index值0/100/200/300，仅适用于局部微调；z-3（300）无法覆盖.dropdown-menu（默认1000），因其属全局浮层，应通过语义化层级（如调整$zindex-dropdown）而非工具类解决。
Bootstrap 5 的 z-index 工具类（z-0 到 z-3）怎么用
bootstrap 5 提供了 z-0、z-1、z-2、z-3 四个实用类，对应预设的 z-index 值：0、100、200、300。它们只对已定位元素生效 —— 换句话说，光加 z-2 不管用，必须同时有 position: relative（或 absolute/fixed）。
常见错误现象：<div class="z-3">弹窗</div> 完全没效果，因为默认 position: static，z-index 被忽略。
- 正确写法示例：
<div class="position-relative z-3">弹窗</div> -
z-3是上限值，不支持z-4或更高数字类名；如需更大值，必须自定义 CSS - 这些工具类不参与 Bootstrap 的语义化层级体系（比如
$zindex-modal），仅适合轻量覆盖场景，别用来盖.modal或.dropdown-menu
如何安全扩展 z-index 工具类到 z-4/z-5
Bootstrap 源码里没提供 z-4，但你可以用 Sass 变量或 CSS 自定义属性安全追加。关键不是“多写几个类”，而是让新值和原体系对齐。
如果你用 Sass 编译：
- 在引入 Bootstrap 前重定义
$zindex-sticky等变量，再通过@each扩展工具类生成逻辑 - 避免直接复制 Bootstrap 的
_utilities.scss并硬改 —— 升级时容易丢失
如果只用 CDN CSS：
- 在自定义 CSS 中声明：
.z-4 { z-index: calc(var(--bs-zindex-modal) + 10) !important; }（Bootstrap 5.3+ 支持--bs-zindex-modal） - 别用
z-index: 9999这种魔数 —— 它会和后续引入的.toast（默认 1090）或.offcanvas冲突
为什么 z-3 盖不住 .dropdown-menu？
因为 .dropdown-menu 默认 z-index: 1000，而 z-3 只是 300。这不是工具类“不够强”，而是设计意图不同：z-* 类面向局部微调（如 badge 叠在 card 上），.dropdown-menu 属于全局浮层组件，走的是独立层级通道。
- 检查 computed 样式：目标元素是否被父级
transform或opacity 创建了新层叠上下文？此时调 <code>z-3没用 - 若真要盖住下拉菜单，应优先用语义化方式：
.navbar .dropdown-menu { z-index: 1060; }，而非给触发按钮加z-3 - 注意：Bootstrap 5.3 中
$zindex-dropdown是 1000，$zindex-modal是 1055 —— 所有自定义值都该基于这个基准线浮动
自定义 z-index 时最容易忽略的三个点
很多人调完 z-index 发现还是被盖，问题往往不在数值本身。
- 父容器有
position: relative且z-index: 0（或任意非auto值）→ 它已创建层叠上下文，子元素再高也出不去 - 模态框内初始化的富文本编辑器（如 CKEditor），其 toolbar 默认
z-index: 1000，低于.modal的 1055，但它的父容器（.ck-toolbar-container）可能没显式设position，导致z-index失效 - iOS Safari 下，
position: fixed元素若嵌套在transform容器中，会被降级为absolute渲染 —— 此时z-index对比基准变了，调试要用真实设备看 Layers 面板
