Dropdown 菜单被遮挡？用 z-index 正确控制层叠顺序-html教程-PHP中文网

Dropdown 菜单被遮挡？用 z-index 正确控制层叠顺序

当 CSS Dropdown 菜单（如导航栏下拉项）被后续元素（如 .showcase 区块）遮盖时，根本原因是层叠上下文（stacking context）中元素的绘制顺序未正确设置；只需为下拉容器添加 position: absolute 和足够高的 z-index 即可解决。

当 css dropdown 菜单（如导航栏下拉项）被后续元素（如 `.showcase` 区块）遮盖时，根本原因是层叠上下文（stacking context）中元素的绘制顺序未正确设置；只需为下拉容器添加 `position: absolute` 和足够高的 `z-index` 即可解决。

Dropdown 菜单隐藏在其他元素后方，是前端开发中非常典型的层叠（stacking）问题。其本质并非布局错位或尺寸异常，而是浏览器按层叠顺序（paint order） 渲染元素时，.menu-sub 的堆叠层级（stacking level）低于后续的 .showcase 等区块。

关键前提：z-index 仅对定位元素（即 position 值为 relative、absolute、fixed 或 sticky）生效。你的 .menu-sub 已设置 position: absolute，这正是启用 z-index 的必要条件。

✅ 正确修复方式是在 .menu-sub 类中添加 z-index：

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

⚠️ 注意事项：

不要使用过小的 z-index（如 1），因为父容器（如 .navbar）若未显式设置 z-index，其默认层叠级别可能已高于 1；同时，后续区块（如 .showcase）若设置了 position: relative 或 position: fixed 且 z-index 较高，仍可能覆盖下拉菜单。
确保 .menu-sub 的最近定位祖先（即 .nav-middle li）具有 position: relative —— 这能确保绝对定位的下拉菜单相对于该 <li> 正确定位。建议补充如下样式以增强健壮性：

.nav-middle li {
  position: relative; /* 关键！使 .menu-sub 相对于此 li 定位 */
}

若页面中存在多个需要分层的组件（如模态框、提示气泡），建议建立统一的 z-index 规范，例如：
```
:root {
  --z-nav: 100;
  --z-dropdown: 200;
  --z-modal: 1000;
  --z-toast: 1100;
}
.menu-sub { z-index: var(--z-dropdown); }
```

? 额外优化建议：
为提升可访问性与用户体验，可增加简单的过渡效果和焦点管理（如 :focus-within 支持键盘导航），并确保下拉区域有明确的 top / left 偏移，避免紧贴触发链接导致悬停失效：

.menu-sub {
  top: 100%;
  left: 0;
  margin-top: 4px; /* 微调间距，提升视觉舒适度 */
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

总结：解决下拉菜单被遮挡问题，核心在于理解 CSS 层叠上下文机制；z-index 是直接有效的解决方案，但必须配合正确的定位上下文与合理的数值设计，才能实现稳定、可维护的 UI 行为。