当 CSS 下拉菜单（.menu-sub）因层叠顺序问题被后续元素（如 .showcase）遮盖时，只需为下拉容器添加 z-index 并确保其父级具有定位上下文，即可强制其显示在最上层。
当 css 下拉菜单（`.menu-sub`）因层叠顺序问题被后续元素（如 `.showcase`）遮盖时，只需为下拉容器添加 `z-index` 并确保其父级具有定位上下文，即可强制其显示在最上层。
在构建响应式导航栏时，下拉菜单（Dropdown）常因 CSS 层叠上下文（stacking context）问题而“消失”——表面看是被隐藏了，实则是被后续的 <section class="showcase"></section> 等元素覆盖。根本原因在于：position: absolute 的元素默认位于其最近的定位祖先（position: relative/absolute/fixed/sticky）所创建的层叠上下文中，且若未显式设置 z-index，其层叠等级可能低于后续文档流中的普通块级元素。
✅ 正确解决方案：z-index + 定位上下文
你只需两步即可可靠修复：
-
为
.menu-sub添加z-index（推荐值1或更高）； -
确保其父级
<li>具有定位属性（如position: relative），以建立独立的层叠上下文，避免z-index在全局文档中失效。
/* 关键修复：为下拉菜单添加 z-index，并为其父 li 设置定位 */
.nav-middle li {
position: relative; /* 创建层叠上下文，使子元素 z-index 生效 */
}
.menu-sub {
position: absolute;
top: 100%; /* 紧贴父项底部 */
left: 0;
width: fit-content;
display: none;
background: #ddd;
color: var(--color-2);
height: 500px;
overflow-y: auto; /* 替代单纯 height，更健壮 */
padding: 1rem;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* 可选：增强视觉层次 */
z-index: 1000; /* 显著高于其他元素（如 .showcase 默认 z-index: auto ≈ 0） */
}
⚠️ 注意：
z-index仅对position值为relative、absolute、fixed或sticky的元素生效。纯静态（static）元素无视z-index。
? 为什么 .showcase 会盖住下拉菜单？
-
.showcase使用了position: relative（CSS 中已定义），这使其成为一个新的层叠上下文根； - 若
.menu-sub所在的<li>没有position: relative，则.menu-sub的z-index将相对于计算，而.showcase因文档流靠后，默认层叠等级更高； - 加上
z-index: 1000后，即使.showcase也设置了z-index，只要其值
✅ 最佳实践建议
- 始终为含
position: absolute子元素的父容器（如<li>）显式声明position: relative； - 使用语义化
z-index命名空间（例如：10导航栏、100下拉菜单、1000模态框），便于维护； - 避免滥用高
z-index（如9999），优先通过结构优化层叠逻辑； - 测试移动端：添加
@media (max-width: 768px)规则，必要时切换为点击展开或汉堡菜单。
通过以上调整，你的下拉菜单将稳定显示在所有内容之上，既符合可访问性要求，也保持代码清晰可维护。
