Dropdown被父容器裁剪的主因是父元素存在overflow: hidden、clip-path或创建层叠上下文，Popper默认以首个溢出限制祖先为边界；应优先用data-bs-container="body"移出DOM或boundary: 'window'突破限制。

Dropdown 被父容器裁剪，根本不是菜单本身的问题

下拉菜单显示不全、被截断、弹出区域受限——90% 的情况不是 dropdown-menu 自身样式错了，而是它被某个带 overflow: hidden、clip-path 或创建了新层叠上下文的父容器“关”在里面了。popper 默认把 boundary 设为 'clippingparents'，也就是向上找第一个有溢出限制的祖先，然后把它当“墙”来约束菜单位置。

• 检查浏览器开发者工具里 dropdown-menu 的 computed overflow，再逐级往上点父元素，看哪个开始出现 overflow: hidden 或 overflow: clip
• 常见“罪魁”包括：.accordion-collapse、.card-body、.modal-body、自定义滚动容器（如 div class="scrollable"）
• 如果父元素有 transform、filter、opacity < 1，也会让 Popper 错判边界，即使没写 overflow 也等效于加了墙

用 boundary: 'window' 或 'body' 强制突破容器限制

最直接有效的办法，是初始化 Dropdown 时显式告诉 Popper：“别管那些中间容器，以整个窗口或 body 为边界”。这能绕过所有中间层的溢出限制，但要注意副作用。

• 只对需要突破的下拉按钮单独配置，避免全局污染：

  const dropdownEl = document.querySelector('#my-dropdown-btn');
  new bootstrap.Dropdown(dropdownEl, {
    boundary: 'window' // 或 'body'
  });

• boundary: 'window' 是 Bootstrap 5.2+ 原生支持的选项，兼容性好；'body' 在某些滚动场景下可能随页面滚动偏移，不如 window 稳定
• 如果用 data 属性初始化（data-bs-toggle="dropdown"），无法直接传 boundary，必须改用 JS 初始化
• 注意：设成 'window' 后，菜单不再响应父容器的 transform/position 变化，但能解决 95% 的裁剪问题

用 data-container="body" 把菜单 DOM 挂到 body 下

这是另一种更彻底的解法：不改变定位逻辑，而是把 dropdown-menu 这个 DOM 节点从原位置移出来，直接挂到 <body> 底下。这样它完全脱离原父容器的溢出和层叠上下文限制。

VPS Bootstrap

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

下载

• 只需在触发按钮上加属性：<button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-container="body">Menu</button>
• 该属性会自动把菜单节点 append 到 document.body，无需手动 JS 操作
• 与 boundary 配合使用效果更稳：比如 data-bs-container="body" data-bs-boundary="window"
• 副作用是菜单失去原上下文的 CSS 继承（比如字体大小、颜色变量），需确保全局样式覆盖到位

为什么改了 z-index 还是被遮？关键在层叠上下文

很多人以为调高 dropdown-menu 的 z-index 就能解决被盖问题，结果无效。真正卡住的是：它的父容器意外创建了新的层叠上下文，导致这个 z-index 只在那个小盒子里有效。

• 检查父元素是否含以下任一属性：transform、filter、will-change、opacity < 1、isolation: isolate
• 修复优先级：移除父级 transform > 给父级加 position: relative + 合理 z-index > 最后才动 dropdown-menu 的 z-index
• Bootstrap 5.3 默认 $zindex-dropdown: 1000，而 .modal 是 1050、.navbar 是 1030，若菜单在 modal 里，至少要设 .modal .dropdown-menu { z-index: 1060; }
• 永远不要用 !important 直接怼 z-index，它会掩盖真实层级问题，后续加 toast 或 tooltip 时更难调试

复杂点在于：同一个下拉按钮，可能同时面临“被裁剪”和“被遮挡”两个独立问题。先用 data-bs-container="body" 解决裁剪，再用精准选择器 + position: relative 修复父容器层叠上下文，才是稳定解法。