z-index失效的根本原因不是数值不够大，而是目标元素未满足生效条件：未设置非static定位，或其祖先元素意外创建了层叠上下文（如含transform、opacity
为什么改了 z-index 还是被遮挡
不是 z-index 值不够大，而是它根本没生效——因为目标元素没创建层叠上下文，或被父级“关进小黑屋”了。
必须同时满足两个条件，z-index 才起作用：
-
position不能是static（得是relative、absolute、fixed或sticky） - 它的任意一个祖先元素不能意外创建新的层叠上下文（比如带
transform、opacity: 0.99、will-change、filter的父容器）
常见真凶：
-
.navbar-collapse用了transform: translateY()→ 整个下拉菜单被锁在它的局部上下文中 -
.accordion-item没设position，但兄弟项靠文档流自然堆叠，后渲染的项压住前一项的下拉 - 模态框里嵌了个
position: relative的 wrapper →.modal的z-index: 1050只在这个 wrapper 内有效
.dropdown-menu 的默认 z-index 是多少
Bootstrap 5.3 中，.dropdown-menu 默认是 z-index: 1000；而 .modal 是 1050，.navbar-fixed 通常是 1030，.modal-backdrop 是 1040。
所以只要下拉菜单出现在模态框或固定导航栏内部，1000 就天然不够用。
覆盖时注意三点：
- 用更具体的选择器，比如
.modal .dropdown-menu或.navbar .dropdown-menu，避免全局污染 - 确保你的 CSS 在 Bootstrap 主样式之后加载（检查
顺序或打包顺序） - 别设
z-index: 9999—— 后续加个.toast（默认 1090）或第三方 datepicker，又得重调
父容器有 transform 时下拉菜单错位还遮不住
这是最隐蔽也最常被误判的问题：transform 会强制创建新的层叠上下文，导致子元素的 z-index 只跟这个父容器比，不跟整个页面比。
典型场景：
-
.navbar用transform: translateY()实现折叠动画 -
.offcanvas或.accordion-body依赖transform控制显隐
解决路径（按推荐顺序）：
- 把触发下拉的按钮从
transform容器里移出来（DOM 位置调整） - 初始化下拉时加
boundary: 'window'：new bootstrap.Dropdown(element, { boundary: 'window' }); - 临时补救：给触发元素加
style="transform: none !important;"
为什么下拉菜单背景透明看起来像被遮挡
这不是层级问题，是视觉错觉。很多自定义下拉或第三方插件（如 bootstrap-datepicker）生成的 .dropdown-menu 没设背景色，默认透明。
结果就是：菜单文字能看见，但下方的 、导航栏、模态框内容透过菜单“露出来”，像被盖住。
检查并补上这两行：
background-color: #fff;-
backdrop-filter: none;（如果用了模糊，也可能干扰）
真正复杂的点不在数字大小，而在你是否意识到：同一个 z-index: 1060，在 transform 父容器里和在 body 直接子元素里，意义完全不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
