z-index不起作用的根本原因是父元素创建了新的堆叠上下文，如opacity、transform、filter等属性会限制子元素z-index的作用范围，需检查并移除或改用portal挂载等方式解决。
z-index不起作用？先确认是否创建了新的堆叠上下文
很多情况下给 .modal 或 .dropdown-menu 设置了 z-index: 9999，但依然被遮挡——根本原因不是值不够大，而是父元素触发了新的堆叠上下文（比如有 opacity: 0.99、transform: translateZ(0)、will-change: transform，甚至 filter: blur(1px)）。这些属性会让子元素的 z-index 只在该父容器内生效，无法突破到全局。
实操建议：
- 用浏览器开发者工具检查遮挡元素及其所有父级，看是否有上述“隐式堆叠上下文触发器”
- 临时移除可疑父元素的
transform、opacity、filter等样式，验证是否恢复层级关系 - 若必须保留这些效果，考虑把弹层（如
.tooltip）用portal方式挂载到下，绕过父级堆叠限制
Bootstrap 5 的 z-index 值是预设的，别硬写 magic number
Bootstrap 5 在 _variables.scss 中定义了一套语义化 z-index 级别：$zindex-dropdown、$zindex-sticky、$zindex-fixed、$zindex-modal-backdrop、$zindex-modal 等。直接覆盖时写死 z-index: 1050 很容易和未来版本冲突，也难维护。
实操建议：
- 通过 Sass 变量重定义：在引入 Bootstrap 前设置
$zindex-modal: 1100 - 用 CSS 自定义属性（如果不用 Sass）：在
:root中声明--bs-zindex-modal: 1100，Bootstrap 5.3+ 已支持部分变量转为 CSS 变量 - 避免在组件内部用
style="z-index: 2000"写行内样式——它会覆盖所有外部规则，且无法被!important安全修正
dropdown 与 toast 同时出现时谁该在上？看它们的堆叠上下文起点
默认情况下，.dropdown 渲染在触发按钮同级，而 .toast 默认 append 到 。这意味着即使 .toast 的 z-index 数值更小，它也可能盖住 .dropdown——因为两者的堆叠上下文起点不同：.toast 从 开始计数，.dropdown 从某个 position: relative 的父容器开始。
实操建议：
- 统一弹层挂载点：用 JavaScript 把
.dropdown-menu手动移到document.body并定位（注意处理top/left和滚动同步） - 检查
body是否有transform或filter——若有，.toast的堆叠上下文也会被截断，导致层级失效 - 不要依赖“哪个数值大就一定在上”，优先确保它们处于同一堆叠上下文层级
移动端 iOS Safari 的 z-index bug 怎么办
iOS Safari（尤其 15–16）对 position: fixed + z-index 的组合有渲染异常：键盘弹出后，.modal-backdrop 可能错位或消失，或者 .dropdown 被输入框遮挡。这不是 CSS 写错了，而是 WebKit 对堆叠上下文重排的竞态问题。
实操建议：
- 给
body加touch-action: manipulation，减少合成层干扰 - 避免在
fixed元素上同时用transform和z-index；改用top/left定位 - 监听
focusin事件，在 input 聚焦时临时提升相关弹层的z-index，失焦后还原
真正麻烦的从来不是数值大小，而是你不知道哪一层父元素悄悄关上了那扇门。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
