模态框内浮层被遮住主因是父容器触发新堆叠上下文而非z-index过小，需通过DevTools定位并移除opacity/transform/filter/z-index等属性，或用Portal挂载到body下解决。
模态框被自己内部的浮层遮住，是堆叠上下文“关小黑屋”了
不是z-index写小了，而是.modal-content或其某个父容器（比如.modal-body里的卡片、轮播图、编辑器容器）触发了新的堆叠上下文——比如加了opacity: 0.99、transform: translateZ(0)、filter: blur(1px)，或者position: relative配z-index: 0。一旦这样，里面所有子元素（如.dropdown-menu、.tippy-box、CKEditor气球工具栏）的z-index就只在它内部比大小，再高也出不去。
实操建议：
立即学习“前端免费学习笔记（深入）”；
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 打开 Chrome DevTools → Elements 面板，选中遮挡你的浮层的元素（比如下拉菜单），右侧面板「Layout」区域看是否标着「Stacking context」；如果是，往上逐级点父节点，找到第一个标为「Yes」的祖先
- 临时移除那个父元素的
transform、opacity、filter或z-index，验证是否立刻恢复 - 如果必须保留效果（比如动画需要
opacity），就把浮层用portal方式挂到<body>下，绕过父级限制
Bootstrap Modal 和第三方插件 z-index 数值对不齐
Bootstrap 5 默认$zindex-modal是1050，$zindex-modal-backdrop是1040；但 Tippy.js 默认用2147483647，Flatpickr 是9999，CKEditor 工具栏是1000。硬写z-index: 9999 !important会破坏整个层级体系，比如把.dropdown-menu（默认1000）压在 modal backdrop 下面。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 如果你用 Sass/Less，在引入 Bootstrap 前重定义变量：
$zindex-modal: 1100，然后让第三方插件的 z-index 基于它计算（如.tippy-box { z-index: #{$zindex-modal + 10} }） - 若插件不支持变量，用选择器权重提升：
.modal .tippy-box { z-index: calc(1050 + 5) !important; }，但注意别覆盖.modal-backdrop - 避免在
.modal-content上写position: relative+z-index——这会让所有子浮层被锁死在它内部
DOM 挂载位置错位：一个在 body 下，一个在 modal 内部
Bootstrap 要求.modal必须是<body>直系子节点，但很多第三方插件（Tippy、CKEditor Balloon Toolbar、Flatpickr 日历）默认挂载到触发元素附近。结果.modal在<body>下，而.tippy-box却在<div class="modal-body">里——天然分属两个堆叠上下文，数值再大也没法跨上下文竞争。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查插件文档，启用
appendTo: 'body'或strategy: 'fixed'等挂载到 body 的选项（Tippy 支持appendTo: document.body） - React/Vue 中用
createPortal或Teleport把浮层内容手动挂到<body>下 - 不要依赖插件默认行为，尤其当它嵌在
.modal-body里时，必须显式控制挂载点
手风琴（Accordion）里下拉菜单被盖住，不是 z-index 问题，是没建层叠容器
当.dropdown放在.accordion-item里时，由于.accordion-item默认position: static，所有项共享同一层叠上下文。后渲染的.accordion-item（比如第2个）会自然覆盖前一个的.dropdown-menu，哪怕你给菜单写了z-index: 9999也无效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给每个
.accordion-item加position: relative，让它成为独立层叠容器 - 用
:nth-child()递减设置z-index：.accordion-item:nth-child(1) { z-index: 3; }、.accordion-item:nth-child(2) { z-index: 2; }，确保上方项层级更高 - 别只调
.dropdown-menu，它的祖先没定位，z-index 就是废的
opacity: 0.99、transform: scale(1)、甚至z-index: 0配position: relative，都会悄悄建墙。调试时优先看「Stacking context」标记，而不是狂改数字。 
