Bootstrap的.z-*工具类仅提供固定z-index值，不管理层叠上下文；失效主因是缺少position属性或父容器创建了新层叠上下文，需确保定位与上下文一致。
z-index 类名和实际 CSS 层级不一致？
Bootstrap 的 .z-index 工具类（如 .z-0、.z-1、.z-3）只是预设的 z-index 值，不是“层级管理器”。它们不会自动协调兄弟元素、父容器或定位上下文之间的关系。你加了 .z-3 却没效果，大概率是因为父元素没设 position: relative，或者兄弟元素在另一个 stacking context 里。
实操建议：
- 先确认目标元素有
position: relative、absolute或fixed—— 没这句，z-index直接失效 - 检查父容器是否无意中创建了新的 stacking context（比如带
opacity: 0.99、transform、will-change），这会让子元素的z-index只在该容器内生效 - Bootstrap 默认只提供
.z-0到.z-3，以及.z-n1（即 -1）。真要叠到 999？得自己写 CSS 或扩展 Sass 变量
Modal、Dropdown、Toast 重叠时 z-index 错乱
Bootstrap 内置组件的 z-index 是靠 $zindex-modal、$zindex-dropdown 这类 Sass 变量统一控制的，默认值分别是 1055、1000。如果你手动给某个 .dropdown-menu 加了 .z-3（值为 3），它会直接被默认的 1000 覆盖——因为内联样式或工具类的优先级，通常干不过组件自身的 CSS 规则。
实操建议：
- 不要用
.z-*类去覆盖组件层级，改_variables.scss里的$zindex-*变量，然后重新编译 - 如果只是临时调试，用浏览器开发者工具看真实生效的
z-index值，注意区分“计算后样式”和“原始声明” - 多个 Modal 嵌套？Bootstrap 不支持原生堆叠，第二个 Modal 必须手动提升其
.modal-backdrop和.modal的z-index，否则点不到底层按钮
自定义组件和 Bootstrap 组件混用时层级打架
你写了个 .my-tooltip，用了 .z-2，但页面上同时有 .dropdown（z=1000）和 .toast（z=1090），结果 tooltip 总是被盖住。这不是工具类不够用，而是你没对齐 stacking context 的“起点”。Bootstrap 的所有组件都基于同一套 $zindex- 体系，你的自定义组件必须接入它，而不是另起炉灶。
实操建议：
- 在 Sass 中引用
bootstrap/scss/functions和bootstrap/scss/variables，用z-index($zindex-dropdown)这种函数生成值，确保语义对齐 - 避免在 HTML 里写
style="z-index: 1020"—— 这种硬编码后期根本没法维护，也容易和未来升级的 Bootstrap 版本冲突 - 如果项目用的是 Bootstrap CDN（非 Sass），那就老老实实查文档里的 z-index 表，照着值手写 class 或 style
为什么加了 .z-1 还是看不到元素？
最常见原因：元素本身不可见，或者被其他更“重”的 stacking context 截断了。比如一个 position: relative; z-index: 1 的卡片里放了个 .z-3 的 badge，这个 badge 的层级只相对于卡片生效，不会突破卡片本身在页面中的位置。
实操建议：
- 打开 DevTools → Elements 面板，右键目标元素 → “Reveal in Layers panel”，直观看它属于哪个 stacking context
- 临时加
outline: 1px solid red确认元素是否真的渲染出来了，有时候z-index没问题，但visibility: hidden或opacity: 0让你误以为是层级问题 - 移动端 Safari 对
transform创建 stacking context 更敏感，哪怕只是transform: translateZ(0)，也可能让z-index行为突变
层级不是数字越大越稳，而是 stacking context 的嵌套结构决定的。很多人调半天 .z-*，最后发现是父容器少了一句 position: relative —— 这个细节，在快速写原型时最容易被跳过。
