relative定位导致内容被showcase覆盖问题求助（附代码截图）

我来帮你排查这个布局问题，核心原因是绝对定位元素引发的父容器高度塌陷，下面是具体分析和修复方案：

问题根源 #

• 你的.showcase使用了position: absolute，这个定位会让元素完全脱离正常文档流，不再为父容器.relative贡献高度。
• 同时nav也设置了position: absolute，同样脱离文档流，导致.relative没有任何正常流元素撑起它的高度，最终高度变为0。
• 这就使得页面下方的.container向上移动，和占据全屏的.showcase重叠，看起来就是被覆盖了。

修复方案 #

1. 修复父容器高度塌陷 #

给.relative添加min-height: 100vh，让它和.showcase一样占据全屏高度，这样就能把下方的.container挤到它的下方，避免重叠：

.relative { 
  position: relative; 
  top: 0; 
  left: 0;
  min-height: 100vh; /* 添加这行代码 */
}

2. （可选）修复导航的语义化问题 #

虽然这不是布局覆盖的直接原因，但你的nav里的ul结构不符合HTML语义规范，ul的直接子元素应该是li，建议修改为：

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Login</a></li>
  <li><a href="#">SignUp</a></li>
  <li><a href="#">Dashboard</a></li>
</ul>

效果验证 #

修改后，.relative会占据100vh的高度，.container会正常显示在页面的底部区域，不会再被.showcase覆盖。

内容的提问来源于stack exchange，提问作者Anurag Kumar