当导航栏下拉菜单被后续元素（如 .showcase）遮盖时，根本原因是 CSS 堆叠上下文（stacking context）中元素的绘制顺序不正确；只需为下拉容器添加 position: absolute + z-index 即可强制其显示在最上层。

css 下拉菜单被下方元素遮挡，是初学者构建响应式导航时最常见的布局陷阱之一。当你的 `.menu-sub` 在 dom 中紧随 `.navbar` 之后，而下一个 `

` 又设置了 `position: relative`（哪怕只是隐式触发堆叠上下文），就可能因默认 `z-index: auto` 导致下拉层被压在底层——此时仅靠调整 `height` 或 `overflow` 无法奏效，必须主动控制层叠顺序。

✅ 正确解法：用 z-index 显式提升层级

z-index 仅对已定位元素（即 position 为 relative、absolute、fixed 或 sticky）生效。你的 .menu-sub 已设 position: absolute，只需追加一个足够大的 z-index 值即可：

.menu-sub {
  position: absolute;
  width: fit-content;
  display: none;
  background: #ddd;
  color: var(--color-2);
  height: 500px;
  z-index: 1000; /* 推荐使用较大值，避免与其他组件冲突 */
}

? 为什么推荐 z-index: 1000 而非 1？
虽然 z-index: 1 在简单场景下可行，但实际项目中 .navbar、.showcase 或模态框等组件可能也设置了 z-index（如 10、50）。使用 1000 是前端开发中的通用实践，确保下拉菜单始终“浮”在最上层，避免未来扩展时意外被覆盖。

⚠️ 关键注意事项

• 父容器需有明确定位上下文：.nav-middle li 应保持 position: relative（当前代码中未显式声明，但浏览器默认 static，会导致 absolute 子元素相对于最近已定位祖先定位）。建议显式补全：

  .nav-middle li {
    position: relative; /* 确保 .menu-sub 相对于当前 <li> 定位 */
  }

• 避免滥用 z-index：不要给所有元素都设高 z-index，否则会破坏自然层叠逻辑。只对需要「穿透式展示」的组件（如下拉菜单、Tooltip、Modal）启用。

• 检查堆叠上下文边界：若 .navbar 或其祖先设置了 opacity 、<code>transform、filter 等属性，会创建新的堆叠上下文，导致子级 z-index 仅在其内部生效。此时需将 z-index 提升到该上下文的父级。

  

  CSS婚礼策划服务机构宣传网站模板

  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

  下载

  立即学习“前端免费学习笔记（深入）”；

? 完整修复后效果验证

添加上述样式后，悬停「Catalog」「Pricing」等菜单项时，.menu-sub 将稳定显示在 .showcase 等后续区块之上，且支持滚动（overflow: auto 已生效）、响应式宽度（width: fit-content）和语义化结构。无需修改 HTML 结构，纯 CSS 层面即可闭环解决。

总结：z-index 不是“魔法”，而是 CSS 层叠模型中精准控制视觉层级的必要工具——理解它何时生效、为何失效，比记住数值更重要。