网站第二个Div无法在首个Div下方正常显示的布局问题排查

• 核心错误是#home区块被设置了position: absolute属性：绝对定位元素会完全脱离正常文档流，不占据任何页面布局空间，后续的#projects区块会按照默认文档流规则从页面最顶部开始渲染，直接被全屏铺开的home区块完全遮挡，因此无法正常显示。
• 此前尝试的给两个区块设置相同背景图、给父容器#main设置超大最小高度的方案均未触达问题本质，该问题和背景样式无关，是文档流排布规则导致的层级遮挡。
• 额外隐患：#home内部的标题、简介、社交图标均使用绝对定位，如果父元素没有正确的定位参照，这些元素的位置会相对于整个视口偏移，后续新增其他区块时会出现错位。

调整#home区块样式 #

把原来的绝对定位改为相对定位，同时设置明确的区块高度，既保留正常文档流占位，又能给内部绝对定位的子元素提供定位参照：

#home {
  background-image: url("https://rb.gy/r1vmga");
  background-size: cover;
  background-position: center;
  position: relative; /* 替换原来的absolute，作为内部子元素的定位参照 */
  min-height: 100vh; /* 让home区块默认占满1整个屏幕高度 */
  color: white;
  font-family: "Helvetica Neue", Helvetica, Arial;
}
/* 原有home内部的#title、#bio、#main-social-icons样式无需修改，父元素设relative后位置会正常相对于home区块计算 */

调整#projects区块样式 #

给区块设置最小高度和内边距，保证区块能正常撑开、内容不会贴边：

#projects {
  background-image: url("https://rb.gy/r1vmga");
  background-size: cover;
  background-position: bottom center;
  min-height: 100vh; /* 给区块设置最小高度，避免内容过少导致区块塌陷 */
  padding: 4rem 2rem; /* 增加内边距，让标题和区块边缘留出合理间距 */
  color: white;
  font-family: "Helvetica Neue", Helvetica, Arial;
}

正常文档流中块级元素默认就是从上到下依次排布的，后续要加的contact区块不需要加特殊定位属性，只要设置好自身高度、内边距等基础样式，就会自动排在projects区块下方，实现预期的纵向布局效果。不要给最外层的内容区块随便加position: absolute/fixed，这类属性会让元素脱离文档流，破坏默认排布规则。
原有#main设置的min-height: 500vh可以直接删除，父容器高度会被子元素自动撑开，不需要强行设置超大高度。

内容的提问来源于stack exchange，提问作者Small Playz