HTML/CSS新手求助：着陆页后新增内容紧贴顶部问题排查与修复

核心原因 #

你遇到的问题大概率是着陆页容器使用了脱离文档流的定位（比如position: absolute/fixed），导致页面后续元素无法识别着陆页的占位，直接跑到页面顶部位置；另外也可能是父容器高度塌陷，让后续元素“贴”上来。

具体排查与修复步骤 #

1. 检查定位属性 #

打开你的CSS文件，查找#main、#box1、#box2、#box3这些容器的样式：

• 如果发现有position: absolute或position: fixed，且不是必须的，直接删掉这行（默认position: static即可）。
• 如果必须用绝对定位（比如做全屏着陆页），给父元素（比如<body>）加position: relative，同时给着陆页容器设置明确高度（比如height: 100vh），然后给后续板块加margin-top，值等于着陆页高度：

#main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* 全屏高度 */
}
#about-section {
  margin-top: 100vh; /* 把关于板块推到着陆页下方 */
}

2. 修复高度塌陷 #

如果着陆页里用了浮动元素（float: left/right），父容器会因为子元素浮动而高度为0，后续元素会直接贴在顶部。给父容器加清除浮动的样式：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

然后给#container或#box3加上这个类：

<div id="container" class="clearfix">
  <!-- 原内容 -->
</div>

3. 加载界面的处理 #

如果加载界面用了position: fixed覆盖页面，隐藏时要设置display: none，不能只改opacity或visibility，不然它仍会占据页面空间：

#loader {
  position: fixed;
  width: 100%;
  height: 100%;
  background: url(loader-img.jpg) center no-repeat;
  /* 隐藏时的样式 */
  display: none;
}

示例：添加About板块 #

在#main后新增About板块和页脚：

<body>
  <!-- 加载界面 -->
  <div id="loader"></div>
  <!-- 原着陆页内容 -->
  <div id="main">
    <!-- 原box1、box2、box3内容 -->
  </div>
  <!-- 新增About板块 -->
  <div id="about-section">
    <h2>关于我们</h2>
    <p>这里是关于我们的内容...</p>
  </div>
  <!-- 页脚 -->
  <footer>
    <p>© 2024 CreativX</p>
  </footer>
</body>

配合前面的CSS修复，就能让新增板块正常显示在着陆页下方。

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