HTML/CSS中hobbies板块定位异常，寻求布局修复方案

问题根源 #

1. #about 使用 position: absolute 脱离了正常文档流，页面布局时不会为它预留空间，导致后续的 #hobbies 会从文档流起始位置（hero 下方）渲染，看起来在 about 上方。
2. 手动调整 hobbies 位置后，absolute 定位的 about 默认堆叠层级更高，会遮挡 hobbies。

具体修复步骤 #

1. 修正 about 板块的定位方式

将 #about 的绝对定位改为相对定位，让它正常占据文档流空间，hobbies 会自动排在其下方：

#about {
  position: relative; /* 替换原有的 position: absolute */
  margin-top: 11vh; /* hero 高度为 100vh，用 margin-top 代替原 top:111vh 的间距 */
  left: 45vw;
  font-family: 'Playfair Display';
  width: 29vw;
}

2. 调整 about 内部元素的定位

about 改为相对定位后，内部的模糊背景、分割线等元素需改为相对于 about 定位，避免破坏整体布局：

#blur_bg {
  animation: fadeInAnimation ease 3s;
  position: absolute; /* 替换原 relative */
  bottom: 0;
  left: 28vw;
}

#blur_bg2 {
  animation: fadeInAnimation ease 3s;
  position: absolute; /* 替换原 relative */
  bottom: 0;
  left: -58vw;
}

#hr {
  position: absolute;
  bottom: -50px; /* 调整到 about 底部下方 */
  right: -1vw;
  width: 50vw;
}

3. 优化 hobbies 板块的间距

给 hobbies 增加顶部间距，提升布局美观度：

#hobbies {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px; /* 增加与 about 的间距 */
}

内容的提问来源于stack exchange，提问作者Shardul Bhatkar