折叠菜单展开后内容被遮挡主因是 max-height 动画值固定导致溢出，而非 z-index 不足；应设为 120vh 或按项估算高度，并修复层叠上下文断裂及下拉菜单定位问题。
折叠菜单展开后内容被遮挡，90%不是 z-index 不够高，而是层叠上下文断裂或 max-height 动画值卡死——尤其在 Bootstrap、Elementor 或自定义 flex 导航中。
为什么 .navbar-collapse.show 展开后内容被截断
根本不是代码写错了，而是 .navbar-collapse.show 的 max-height 过渡值是固定估算值（比如 300px），不随真实内容高度变化。一旦导航项含多行文字、图标、.dropdown 或 padding 偏大，实际高度就超了，overflow: hidden 直接切掉底部内容。
- DevTools 里能看到 DOM 存在，但高亮框只包住前几项，下方空白
- 临时加
transition: none禁用动画后内容全显示 → 基本锁定是max-height不足 - 别乱设
max-height: none：CSS transition 不支持它作动画终点，会导致动画失效
怎么安全增大 .navbar-collapse.show 的 max-height
必须用「足够大 + 可动画」的值，不能依赖百分比或关键字。
- 通用稳妥方案：
.navbar-collapse.show { max-height: 120vh !important; }——vh相对视口，适配大小屏，!important确保压过 Bootstrap 默认值 - 精简场景（仅 3–5 个
.nav-link）：.navbar-collapse.show { max-height: 240px; }—— 按每项约 48px 高度 + 余量估算，避免大数值触发低端机重排卡顿 - 别在
@media查询里重复覆盖，统一放在全局 CSS 最后追加，靠 specificity 或!important生效
.dropdown 在折叠态下拉菜单溢出或错位
.dropdown-menu 默认是 position: absolute，不占 .navbar-collapse 高度，但它父级（如 .nav-item）若有 padding-block 或 min-height，视觉上“变高”却没被 max-height 包含——点开后菜单向上溢出、被切半，或整个折叠区突然撑高又错位。
- 给
.navbar-collapse.show .dropdown-menu加position: static !important;，让它随文档流撑高容器 - 或者改用
data-bs-popper="static"属性禁用 Popper.js 定位：<ul class="dropdown-menu" data-bs-popper="static"></ul> - 排查是否在
@media (max-width: 991.98px)下误写了.dropdown-menu { top: 100% }—— 移动端折叠态不需要这个
Elementor 或 flex 导航中下拉菜单被首节遮盖
不是 z-index 数值低，而是首个 .elementor-section 或 transform/opacity 元素意外创建了新层叠上下文，把下拉菜单锁死在局部层级里。
- 必须先确保导航容器有明确定位：
.elementor-nav-menu, .elementor-widget-nav-menu { position: relative; z-index: 9999; } - 再强制子菜单脱离局部上下文：
.elementor-nav-menu .sub-menu { position: absolute !important; z-index: 99999 !important; overflow: visible !important; } - 检查首节是否含
transform、filter、opacity: 0.99等隐式触发 stacking context 的属性 —— 这些比 z-index 更容易被忽略
真正难调的从来不是数值，而是哪个祖先元素悄悄建了层叠上下文，又默默把菜单关进了自己的小房间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
