z-index失效主因是层叠上下文被截断，而非数值过小；需检查父级是否含transform、opacity
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 、<code>filter、will-change、perspective -
position: static的元素无视z-index，必须显式设position: relative/absolute/fixed
.modal 被 .modal-backdrop 盖住，不是 z-index 不够，是挂载位置错了
常见现象：模态框能显示，但点不了按钮、输不了文字，开发者工具里发现 .modal 的父节点是 <div id="app"> 而不是 <code>。这时 .modal 的 z-index: 1050 只在它自己的父容器内生效，而 .modal-backdrop（z-index: 1040）直接挂在 下，自然就“压”住了它。
- React 用户必须用
createPortal渲染到document.body，不能直接 return<modal></modal> - Vue 3 用户要用
<teleport to="body"><modal></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
移动端 fixed 浮层突然掉层，和 z-index 关系不大
iOS Safari 对 position: fixed 的处理极其敏感。地址栏收起/展开、双指缩放、键盘弹出时，fixed 元素可能“漂移”或被系统 UI 截断。这不是 z-index 没生效，而是定位基准发生了变化。
- 不要指望靠调高
z-index解决 iOS 上 Modal 被键盘挡住的问题 - 改用
position: absolute+ 手动监听resize或focusin事件动态计算 top - 对
.modal-dialog加max-height: 80vh和overflow-y: auto，避免内容撑出视口
