z-index不生效主因是元素未进入层叠上下文；需检查position非static、避免父级transform/opacity等触发新层叠上下文，并优先通过Bootstrap的Sass变量或CSS自定义属性安全覆盖。
z-index 不生效，大概率不是值设小了，而是元素根本没进入层叠上下文 —— Bootstrap 里尤其容易踩这个坑。
为什么 Bootstrap 里的 z-index 常常“不起作用”
Bootstrap 的 CSS 默认只给少数组件（比如 .dropdown-menu、.modal、.tooltip）设置了 z-index 值，并且这些值都定义在 $zindex-dropdown、$zindex-modal 等 Sass 变量里。但关键在于：即使你手动写了 z-index: 9999，只要该元素的 position 是 static（默认值），或者它的某个父级用了 transform、opacity < 1、will-change 或 filter，就可能意外创建了新的层叠上下文，导致你的 z-index 只在那个局部生效，根本压不住兄弟节点。
- 检查目标元素是否设置了
position: relative/absolute/fixed——static下z-index完全被忽略 - 用浏览器开发者工具的“Layers”面板或勾选“Show layer borders”，看是否意外触发了新层叠上下文
- 避免在父容器上滥用
transform: translateZ(0)或opacity: 0.99，它们会静默创建隔离上下文
如何安全地覆盖 Bootstrap 默认的 z-index
直接在 HTML 里写 style="z-index: 10000" 是最不推荐的做法 —— 它绕过了 Bootstrap 的层级体系，后续升级或引入其他组件（如 toast、offcanvas）时极易冲突。正确方式是复用或扩展其 Sass 变量体系：
- 如果你用 Sass 编译 Bootstrap，优先在自定义变量文件中重定义
$zindex-sticky、$zindex-fixed等，再@import "bootstrap" - 若仅用 CDN 的 CSS，可追加一条高权重规则，例如：
.my-overlay { position: fixed; z-index: calc(var(--bs-zindex-modal) + 1); }（Bootstrap 5.3+ 提供了 CSS 自定义属性--bs-zindex-*） - 切忌用
!important硬顶 —— 它会让调试变得不可预测，尤其当多个!important规则叠加时
z-index 调整带来的实际副作用
调高 z-index 不只是“让它显示在前面”这么简单。在 Bootstrap 场景下，它常连带引发三类问题：
- 触摸设备上，过高的
z-index可能让pointer-events: none的遮罩层失效，导致背后按钮仍可点击 - 和
backdrop-filter或box-shadow搭配时，某些旧版 Safari 会因层叠顺序错乱而渲染异常 - Modal、Offcanvas 等组件内部依赖精确的
z-index差值（如modal-backdrop比modal低 10），随意覆盖可能破坏关闭动画或点击穿透逻辑
真正麻烦的从来不是“怎么把数字调大”，而是搞清当前元素在哪一层叠上下文中、谁是它的最近层叠祖先、以及这个调整会不会让另一个本不该被盖住的交互控件突然失灵 —— 这些细节，光靠 DevTools 的 computed 样式是看不全的。
