当 CSS 下拉菜单（.menu-sub）因层叠顺序问题被后续 等元素遮盖时，只需为下拉容器添加 position: absolute 和足够高的 z-index（如 z-index: 100），即可确保其始终显示在最上层。
当 css 下拉菜单（`.menu-sub`）因层叠顺序问题被后续 `
在构建响应式导航栏时，下拉菜单（Dropdown）常因 CSS 层叠上下文（stacking context）问题被后续内容区域（如 .showcase）遮挡——这并非布局错位，而是浏览器渲染时的绘制顺序（paint order）导致的视觉覆盖。
根本原因在于：
-
.menu-sub使用了position: absolute，但未显式声明z-index； - 而
.showcase设置了position: relative（即使仅用于定位目的），会创建新的层叠上下文； - 在无
z-index干预时，后出现的相对定位元素默认层叠层级高于前序绝对定位元素（尤其在同级 DOM 顺序下）。
✅ 正确解决方案是为 .menu-sub 显式设置一个足够高且明确的 z-index 值：
.menu-sub {
position: absolute;
width: fit-content;
display: none;
background: #ddd;
color: var(--color-2);
height: 500px;
overflow-y: auto; /* 推荐替代 overflow: auto（更语义化） */
z-index: 100; /* 关键：确保高于所有常规内容区域 */
}
⚠️ 注意事项：
-
z-index仅对已定位元素（即position值为relative、absolute、fixed或sticky）生效；未定位元素设置z-index无效； - 避免使用过小的
z-index（如z-index: 1），因为.showcase的position: relative可能隐式获得更高默认层叠等级；建议从100起步，按需递增； - 若页面中存在模态框（Modal）、Toast 提示等需要更高优先级的组件，应建立清晰的
z-index规范（例如：dropdown: 100,modal: 1000,tooltip: 200），推荐通过 CSS 自定义属性统一管理：
:root {
--z-dropdown: 100;
--z-modal: 1000;
--z-tooltip: 200;
}
.menu-sub { z-index: var(--z-dropdown); }
此外，为提升可访问性与滚动体验，建议为 .menu-sub 添加 max-height 和 overflow-y: auto，并限制最大高度防止内容溢出视口：
.menu-sub {
max-height: 300px;
overflow-y: auto;
scrollbar-width: thin; /* Firefox */
}
.menu-sub::-webkit-scrollbar {
width: 6px;
}
.menu-sub::-webkit-scrollbar-thumb {
background-color: #a0a0a0;
border-radius: 3px;
}
最后，请确认父级 <li> 元素具有 position: relative（这是绝对定位子元素的定位参考点），否则 .menu-sub 将相对于最近的已定位祖先或初始包含块定位，可能导致位置偏移：
.nav-middle li {
position: relative; /* 必须添加 */
}
综上，修复下拉菜单被遮挡的核心是：显式创建强层叠上下文 + 合理的定位上下文约束 + 可维护的层级体系设计。
