Bootstrap导航栏层级(z-index)太低怎么办-Bootstrap教程-PHP中文网

直接改 .dropdown-menu 的 z-index 无效，因 .navbar 创建了层叠上下文；须用更具体选择器（如 .navbar .dropdown-menu）设 z-index: 1060 并声明 position: relative，或移除父级 transform/filter/opacity 等触发上下文的属性。

bootstrap导航栏层级(z-index)太低怎么办

导航栏层级太低，不是 z-index 数值本身小，而是 .navbar 创建了层叠上下文，把内部的 .dropdown-menu 关在里面——改子元素的 z-index 没用，得先破局。

为什么直接改 `.dropdown-menu` 的 `z-index` 无效

常见错误是写 .dropdown-menu { z-index: 9999; }，但浏览器计算时发现它的父级 .navbar 是 position: fixed + z-index: 1030，自动成了新的层叠上下文。子元素再高的 z-index（比如 1000）也只在 .navbar 内部生效，永远出不去。

用 Chrome DevTools 点开 .navbar，看 computed 样式里是否有 transform、opacity: 0.99 或 filter ——这些都会静默创建新层叠上下文
.dropdown-menu 默认 z-index: 1000，而 .navbar 默认是 1030，数值差只是表象，根源是上下文隔离
全局覆盖 .dropdown-menu 不仅无效，还会干扰其他场景（比如模态框里的下拉）

必须用更具体的选择器覆盖 `z-index`

Bootstrap 原生样式优先级高，单写 .dropdown-menu 会被覆盖。你得让选择器“压过它”：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

推荐：.navbar .dropdown-menu { z-index: 1060; position: relative; } —— position: relative 显式声明，避免父级没定位导致 z-index 失效
如果用了旧版类名：.navbar-fixed-top .dropdown-menu
若导航栏嵌在特定容器里：.my-header .navbar .dropdown-menu，避免影响其他 .navbar
确保这条 CSS 在 Bootstrap 的 CSS 之后加载（<link> 顺序或单独 <style></style> 放页面底部）

父级有 `transform` 怎么办

很多动画库、滚动监听或自定义样式会给 .navbar 加 transform: translateY(0) 或 will-change: transform，这会彻底锁死层叠上下文，此时调 z-index 完全没反应。

首选：移除 .navbar 上的 transform、filter、opacity ——用 <code>top + position: relative 替代位移动画
救急方案：JS 初始化下拉时指定 boundary: 'window'，让菜单挂到下，脱离父级上下文：
```
new bootstrap.Dropdown(element, { boundary: 'window' });
```
临时调试可加 style="transform: none !important;" 到触发按钮上，但别留进生产代码