Bootstrap 5 的 z-0～z-3 工具类仅对应 0～3，远低于组件默认层级（如下拉框1000、模态框1055），无法覆盖；真正需对齐其层级体系的是 Sass 变量或 CSS 自定义属性，且必须确保父容器已定位并避免隐式层叠上下文干扰。
Bootstrap 5 的 z-0 到 z-3 工具类根本不够用
Bootstrap 5 内置的 z-0～z-3 只对应 z-index: 0、1、2、3，和模态框（1055）、下拉菜单（1000）完全不在一个量级。你给一个 tooltip 加 z-3，它照样被 .navbar（默认 1030）压住。
真正能对齐 Bootstrap 层级体系的是它的 Sass 变量，比如：$zindex-dropdown（1000）、$zindex-modal（1055）。这些值不是随便定的，它们之间留了空档（比如 1040 给 backdrop，1052 就适合自定义遮罩），硬写 z-9999 不仅无效，还会和后续引入的 .toast（1090）冲突。
如果你用的是编译后的 CSS（CDN 或 dist 文件），z-* 工具类基本只能用于非弹层类元素（比如 badge、alert 的局部层级微调），别指望靠它盖过任何 Bootstrap 组件。
为什么直接写 z-index: 1050 还是被挡住
最常见真凶不是数值小，而是父容器悄悄创建了新的层叠上下文：
-
.dropdown父元素有transform、opacity: 0.99或filter: blur(1px)→ 子菜单的z-index: 1000只在它内部生效 -
.modal没挂到下，而是嵌套在某个position: relative的 div 里 → 它的z-index: 1055被父级“天花板”锁死 - 你改了
.dropdown-menu的z-index，但忘了它的直接父级（比如.dropdown）没设position: relative→z-index不生效
用浏览器开发者工具点开目标元素，逐级往上查 computed 样式，重点看有没有 transform、will-change、isolation: isolate 这些隐式触发器。
安全覆盖 z-index 的三种实操路径
根据你项目的技术栈选一种，别混用：
- 用 Sass 编译：在引入 Bootstrap 前重定义变量，例如
$zindex-dropdown: 1060;—— 最干净，升级时也不容易崩 - 用 CSS 自定义属性（Bootstrap 5.3+）：在
:root里写--bs-zindex-dropdown: 1060;—— 无需构建，CDN 也能用 - 纯 CSS 覆盖：必须用更具体的选择器 + 确保加载顺序在 Bootstrap 之后，例如
.navbar .dropdown-menu { z-index: 1060; position: relative; }
注意：所有方案都要求父容器已定位（position: relative 或其它非 static），否则 z-index 是摆设。
boundary: 'window' 是绕过层叠上下文的 JS 救急方案
当父级有 transform 且无法移除时，Bootstrap 5.2+ 的 Dropdown 支持把菜单挂到 body 下，脱离原上下文：
new bootstrap.Dropdown(element, { boundary: 'window' });
这相当于手动做 portal，但要注意两点：
- 菜单位置需 JS 重新计算（Bootstrap 内部已处理，但滚动或 resize 时可能偏移）
- 如果
body本身有transform或filter，整个页面都会变成新层叠上下文，这时连boundary: 'window'都救不了
真正难搞的从来不是数字大小，而是你不知道哪个父元素正默默截断你的 z-index。调试时先盯紧「最近定位祖先」和「第一个触发层叠上下文的父级」，比盲目加 !important 有用十倍。
