Bootstrap 5 实用类层级设置 Z-Index实用类-Bootstrap教程-PHP中文网

bootstrap 5 的 z-* 实用类仅设置 z-index 值（z-0 至 z-3），且仅对已定位元素生效；无法覆盖 modal（z=1055）等高阶组件，需通过自定义 css 或 sass 变量调整语义化层级。

bootstrap 5 实用类层级设置 z-index实用类

它只负责设置 z-index 值，且**仅对已定位元素生效**。如果你给一个 <div class="z-3"> 加了这个类，但没配 <code>position，那 z-index 就是摆设。

Bootstrap 5 提供的实用类范围很窄：z-0 到 z-3，对应值分别是 0、1、2、3——这点必须清楚，它不是为覆盖 .modal（默认 1055）设计的。

大概率是父容器悄悄创建了层叠上下文，把你的 z-3 “锁死”在局部范围里。常见触发点包括：

父元素有 position: relative + z-index: 0（哪怕只是 0，也构成新上下文）
父元素用了 transform、opacity: 0.99、filter 或 will-change
你正在 .accordion-item 或 .card 里用下拉菜单，而它们默认是 position: static，子元素 z-index 全局计算，但多个同级项会互相覆盖

验证方法：打开 Chrome DevTools → Elements 面板 → 找到该元素 → 右侧 Styles 标签页下方 Layout 区域，看有没有 “Stacking context” 提示。

别硬套 z-* 类，得用语义化层级体系。Bootstrap 5.3 的关键预设值如下（都在 node_modules/bootstrap/scss/_variables.scss 里）：

Bootstrap

Bootstrap 官方编译版下载、npm 安装和 CDN 引入入口。

下载

实操建议：

若用 Sass：在引入 Bootstrap 前重定义变量，例如 $zindex-modal: 1100，再设你的弹窗父容器 z-index: 1101
若用 CSS 自定义属性（Bootstrap 5.3+ 支持）：:root { --bs-zindex-modal: 1100; }
避免行内写 style="z-index: 9999"，它无法被 !important 安全覆盖，且破坏可维护性
对 .dropdown-menu 这类组件，优先用更具体选择器覆盖，如 .navbar .dropdown-menu { z-index: 1060; }，并确保其父 .navbar 有 position: relative

根本原因：默认 .accordion-item 是 position: static，所有下拉菜单都挤在同一个全局堆叠上下文里，后渲染的 item 会自然压住前面的 menu。

正确解法不是调 .dropdown-menu 的 z-index，而是让每个 .accordion-item 成为独立堆叠容器：

推荐写法：

.accordion-item { position: relative; }
.accordion-item:first-child { z-index: 10; }
.accordion-item:not(:first-child) { z-index: 1; }

注意：这里 z-index: 10 和 1 不是随意写的，它要高于内部 .dropdown-menu 的 1000 吗？不，不需要——因为一旦 .accordion-item 创建了层叠上下文，它的子元素 z-index 就只在它内部比大小，所以局部数值够用即可。

Bootstrap 5 实用类层级设置 Z-Index实用类