z-index: -3 表示元素在z轴上被刻意置于最底层，仅对定位元素（position≠static）生效；它常用于让装饰层退至背景后，但易受父级层叠上下文限制而失效。
z-index-3 是什么，它到底管不管用
z-index-3 是 Bootstrap 5+ 内置的实用类，对应 z-index: -3（注意是负数）。它不是“层级很高”的意思，而是**刻意压到最底层**——比如让某个遮罩层退到背景图后面、或让装饰性元素不干扰交互。很多人看到“-3”就以为写错了，其实它是有意为之的设计。
这个类只在元素有 position 属性时生效（relative、absolute、fixed 或 sticky），否则完全被忽略。Bootstrap 不会给 .z-index-3 自动加 position，你得自己补上，例如：class="z-index-3 position-relative"。
什么时候该用 z-index-3，而不是 z-3
Bootstrap 5.3 起提供了两套 z-index 实用类：z-0 到 z-3（正向递增，值为 0–3），以及 z-index-1 到 z-index-3（负向，值为 -1–-3）。别混用：
-
z-3→z-index: 3，适合轻量覆盖，比如 tooltip、小弹层 -
z-index-3→z-index: -3，适合“主动退让”，比如半透明装饰层、背景浮层、SVG 装饰元素 - 二者不能互相替代：给一个 modal-backdrop 加
z-index-3，它会直接消失在 body 背景下面；反过来，给装饰线条加z-3，可能挡住按钮
为什么加了 z-index-3 还没效果
常见失效原因不是类名写错，而是层叠上下文被父级截断：
- 父容器用了
transform、opacity: 0.99或will-change，悄悄创建了新层叠上下文，导致z-index-3只在这个局部生效 - 目标元素的最近定位祖先（比如
.card或.accordion-item）本身设置了z-index: 0或更高，成了“天花板”，子元素再低也出不去 - 你忘了加
position—— 比如只写class="z-index-3"，浏览器直接无视z-index
调试时打开浏览器 Layers 面板，看该元素是否被包裹在一个浅色隔离框里，那就是层叠上下文在作怪。
和 Sass 变量、CSS 自定义属性怎么配合
Bootstrap 的 z-index-3 类是硬编码值，不参与变量体系。如果你需要动态控制（比如深色模式下调整层级），别依赖它：
- 要用变量，优先改 Sass 中的
$zindex-sticky等，然后重编译 - 若用 CDN，可借助 CSS 自定义属性：
z-index: calc(var(--bs-zindex-modal) - 10);，比写死z-index-3更可控 -
z-index-3适合一次性、低风险场景；涉及 modal、offcanvas、toast 等组件交互逻辑时，它太弱，容易引发 pointer-events 或 backdrop 点击穿透问题
真正要稳，就得查 _variables.scss 里的原始定义，而不是靠工具类碰运气。
