先检查被遮元素是否被标记为“stacking context”，若是则说明其与遮挡元素不在同一层叠上下文中，此时调z-index无效；再排查opacity、transform、filter、position等触发新层叠上下文的属性。
怎么确认是不是 z-index 层级冲突
看到元素被遮住、工具栏消失、下拉菜单裁剪，第一反应别急着加 !important，先打开 Chrome DevTools → Elements 面板，选中那个“看不见”的元素，右侧 Styles 标签页往下拉到 «Layout» 区域，看它是否被标记为 “Stacking context”。如果标了，说明它和遮挡它的元素不在同一个层叠上下文中——这时候调 z-index 基本无效。
常见触发新层叠上下文的 CSS 属性包括：opacity: 0.99、transform: translateZ(0)、filter: blur(1px)、will-change: transform，哪怕只是父级加了个 position: relative，也会切断 z-index 的继承链。
Bootstrap 默认 z-index 值有哪些必须知道
Bootstrap 5 的默认层级不是随便定的，而是按交互优先级设计的。关键数值如下：
-
.modal-backdrop: 1040 -
.modal: 1050 -
.navbar-fixed-top/.navbar-sticky-top: 1030 -
.toast: 1090 -
.dropdown-menu: 1000 -
.ck-toolbar-container（CKEditor）: 默认 1000
比如在 .modal 里用 CKEditor，它的气球工具栏（.ck-toolbar-container）默认 z-index=1000，而 .modal 自身是 1050，但工具栏是模态框内部的子元素——只要父级没创建新层叠上下文，1000 就会被 1050 “罩住”，根本出不来。这时候得手动提到 1060+，且要同步确保其父容器（如 .modal-content）没被意外设成 position: relative。
为什么挂载位置比 z-index 数值还重要
很多问题根本不是 z-index 设低了，而是模态框 DOM 没挂到 body 下。React/Vue 项目里，<modal></modal> 组件写在某个 div#app 里，结果整个 .modal 被包裹在一个 position: relative 的容器中——这直接创建了独立层叠上下文，里面再设 z-index: 9999 也只跟这个容器比，不跟 .modal-backdrop（它在 body 下）比。
验证方法很简单：在 Elements 面板里点开 .modal，看它的父节点是不是 body。不是？那就得用 createPortal（React）或 teleport（Vue 3）把它强行挪过去。原生 JS 可以用 document.body.appendChild(modalEl) 补救，但仅限初始化后立即执行。
加 !important 是不是万能解
不是。它只是把问题藏得更深。比如你给 .ck-dropdown__panel 加了 z-index: 1070 !important，但它的父级 .ck-toolbar-container 被 Bootstrap 的 .modal-content（z-index: auto + position: relative）框住了，那 1070 还是出不去。更麻烦的是，一旦第三方组件更新，它们内部的 z-index 策略可能变，你硬顶的 !important 反而会跟新逻辑打架。
真正该花时间做的，是顺藤摸瓜查清哪一级父容器触发了层叠上下文，然后要么移除那个属性，要么用 transform: translateZ(0) 替代 position: relative（它也能触发硬件加速，又不破坏 z-index 关系）。
复杂点永远不在数字本身，而在谁跟谁比——z-index 不是全局排名，是父子关系里的局部排序。漏掉这一层，调再多次数也没用。
