为什么Bootstrap Z-index层级发生冲突

作者：袖梨 2026-08-30

z-index失效主因是层叠上下文被截断，而非数值过小；需检查父级是否含transform、opacity<1等隐式触发器，确保元素处于预期层叠上下文中。

z-index写了但没用，大概率是层叠上下文被截断了

Bootstrap 里 z-index “失效”，90% 不是因为数值太小，而是元素根本没进入你预期的层叠上下文。比如给 .dropdown-menu 设了 z-index: 9999，结果还是被 .navbar 盖住——问题不在菜单，而在它的父级 .navbar-collapse 用了 transform 或 opacity，悄悄创建了一个新层叠上下文，把菜单“关”在里面了。

用 Chrome DevTools 的 «Layers» 面板或 Elements → Styles 右侧 «Layout» 标签页，看目标元素是否被标记为 “Stacking context”
重点检查父级是否含这些隐式触发器：transform、opacity < 1、filter、will-change、perspective
position: static 的元素无视 z-index，必须显式设 position: relative/absolute/fixed

.modal 被 .modal-backdrop 盖住，不是 z-index 不够，是挂载位置错了

常见现象：模态框能显示，但点不了按钮、输不了文字，开发者工具里发现 .modal 的父节点是 <div id="app"> 而不是 <body>。这时 .modal 的 z-index: 1050 只在它自己的父容器内生效，而 .modal-backdrop（z-index: 1040）直接挂在 <body> 下，自然就“压”住了它。

React 用户必须用 createPortal 渲染到 document.body，不能直接 return <Modal />
Vue 3 用户要用 <Teleport to="body"><Modal /></Teleport>，别依赖 v-model 绑定在局部节点
原生 JS：在调用 modal.show() 前执行 document.body.appendChild(modalEl)，否则可能触发两次重排

直接写 z-index: 9999 是最危险的“解法”

硬写魔数会破坏 Bootstrap 的语义化层级体系。比如你把 .dropdown-menu 改成 z-index: 9999，后面引入 .toast（默认 z-index: 1090）或第三方日期选择器（可能用 z-index: 2147483647），立刻冲突。更糟的是，!important 会让后续调试不可预测，尤其多个 !important 规则叠加时。

用 Sass 编译的项目，优先重定义变量：$zindex-dropdown: 1060，再 @import "bootstrap"
只用 CDN 的项目，用 CSS 自定义属性：.my-dropdown { z-index: calc(var(--bs-zindex-modal) + 10); }（Bootstrap 5.3+ 支持）
避免全局覆盖，用更具体选择器：.navbar .dropdown-menu、.modal .dropdown-menu