transform非none必创建新层叠上下文，使内部z-index仅在该上下文中生效，无法与外部元素比较层级；需通过开发者工具验证或移除transform定位问题。
轮播图（.carousel）创建了独立层叠上下文
轮播图组件默认使用 transform: translateX() 实现滑动动画，而任何非 none 的 transform 值都会**强制创建新的层叠上下文**。这意味着它内部所有子元素（包括嵌套的下拉菜单）的 z-index 只在轮播图这个“盒子”内生效，无法突破到页面全局层级中去盖过其他组件。
常见现象是：下拉菜单明明写了 z-index: 9999，但展开后仍被轮播图图片或指示器遮住——不是数值不够，而是它根本没机会参与全局堆叠计算。
- 用浏览器开发者工具选中轮播图容器（如
.carousel或.carousel-inner），检查 computed 样式里的transform、opacity、filter或will-change - 只要其中任一属性存在且非默认值，就说明它已建立新层叠上下文
-
z-index对position: static元素无效，确认下拉触发器（如.dropdown）是否设置了position: relative
.carousel 默认 z-index 过低且未设定位
Bootstrap 5 的 .carousel 类默认没有 position 属性（即 static），也没有显式 z-index。但一旦它被套进某个有定位的父容器（比如 .section 加了 position: relative），而该父容器又设置了 z-index: 1，那整个轮播图就卡在极低层级里——此时哪怕下拉菜单设成 9999，也只在那个 z-index: 1 的上下文中有效。
更隐蔽的是：有些主题或自定义 CSS 会给 .carousel 加 overflow: hidden + position: relative，这双重组合会直接封死下拉菜单的上升路径。
- 不要给
.carousel直接加高z-index（它没position，加了也白加） - 若必须保留轮播图定位，优先加
position: relative到.carousel，再设合理z-index（如1020，介于.navbar和.dropdown-menu之间） - 避免在
.carousel上同时用transform和z-index——它们互斥，transform会覆盖z-index的作用域
下拉菜单未挂载到足够高的层叠上下文祖先上
下拉菜单的最终层级高度，取决于它**最近的、有定位且未被截断的祖先元素**。如果它嵌在 .carousel-item 里，而 .carousel-item 又被 .carousel 的 transform 锁死，那它的“天花板”就是轮播图本身。此时调 .dropdown-menu 的 z-index 完全无效。
最可靠解法是绕过这个限制，把菜单内容移出轮播图容器：
- 在触发下拉的按钮上加
data-bs-boundary="window"（Bootstrap 5.2+ 原生支持） - 或 JS 初始化时指定边界：
new bootstrap.Dropdown(element, { boundary: 'window' }) - 确保轮播图外层没有
overflow: hidden—— 否则即使挂到window，也会被裁掉
不同 Bootstrap 版本的 z-index 基线差异
Bootstrap 5.3.8 中，$zindex-dropdown 是 1000，而 .carousel 不在官方 z-index 体系里，默认为 auto。但很多项目会手动给 .carousel 设 z-index: 100 或 1，这就导致它实际层级远低于下拉菜单应有的位置——看起来像“被遮挡”，其实是它自己太靠后了。
查你当前用的版本：
- 看
node_modules/bootstrap/scss/_variables.scss中$zindex-dropdown和$zindex-carousel（如有）的值 - 运行
console.log(bootstrap)确认加载的是 5.x 还是混用了 4.x 的 CSS - 若用 CDN，注意某些镜像可能缓存旧版，
.carousel的默认样式可能不含position
真正卡住你的，从来不是 .dropdown-menu 的数字写多大，而是它有没有一个干净、高位、未被 transform 或 overflow 截断的“出生环境”。轮播图的问题，90% 出在这里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
