如何修复HTML滚动式作品集页面的标题与段落定位问题？

问题描述 #

我是HTML新手，正在制作个人作品集网站，期望实现滚动式页面效果：用户可向下滚动或点击导航按钮查看Projects、About me等板块，但目前无法将这些板块放置在介绍页下方，页面排版与板块定位存在问题。

问题根源 #

1. 介绍区域（.hello）使用了position: absolute，脱离文档流导致后续板块无法自然排列在其下方
2. CSS类名.projects与HTML中的Projects大小写不一致，样式无法正常应用
3. 导航链接未设置锚点，无法实现点击跳转对应板块的功能

修复方案及代码调整 #

修改后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My Portfolio</title>
  <link rel="stylesheet" href="./style.css" />
  <link href="https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap" rel="stylesheet" />
</head>

<body>
  <!-- 导航栏 -->
  <div class="navbar-container">
    <div class="navbar">
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#education">Education</a></li>
        <li><a href="#resume">Resume</a></li>
        <li><a href="#about-me">About me</a></li>
      </ul>
    </div>
  </div>

  <!-- 首页介绍 -->
  <section id="home" class="hero-section">
    <div class="hello">
      <p>Hello, I'm</p>
      <h1>----------</h1>
      <h3>but you can call me moosee</h3>
    </div>
  </section>

  <!-- 项目板块 -->
  <section id="projects" class="content-section">
    <div class="projects">
      <h2>Projects</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint odio
        quisquam minus maxime debitis consequuntur alias optio, repellendus
        fuga expedita a in unde incidunt sapiente autem magnam voluptatibus.
        Quaerat voluptate deserunt nemo dolore! Tempore, iste magnam. Quam,
        harum libero hic optio, iste minima voluptas illum possimus dolorum
        odit provident velit delectus distinctio reprehenderit quae aperiam
        eligendi ab voluptatibus voluptatem? Reprehenderit, libero cum? Cum
        doloremque atque error asperiores accusantium iure ratione eius
        officiis, blanditiis, omnis aliquam exercitationem dolor in
        consequatur optio quae nobis, libero ad quos facere vel neque!
        Asperiores eligendi doloremque velit repellat atque nostrum
        reiciendis, ipsam recusandae dicta deserunt?
      </p>
    </div>
  </section>

  <!-- 关于我板块 -->
  <section id="about-me" class="content-section">
    <div class="about-me">
      <h2>About me</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint odio
        quisquam minus maxime debitis consequuntur alias optio, repellendus
        fuga expedita a in unde incidunt sapiente autem magnam voluptatibus.
        Quaerat voluptate deserunt nemo dolore! Tempore, iste magnam. Quam,
        harum libero hic optio, iste minima voluptas illum possimus dolorum
        odit provident velit delectus distinctio reprehenderit quae aperiam
        eligendi ab voluptatibus voluptatem? Reprehenderit, libero cum? Cum
        doloremque atque error asperiores accusantium iure ratione eius
        officiis, blanditiis, omnis aliquam exercitationem dolor in
        consequatur optio quae nobis, libero ad quos facere vel neque!
        Asperiores eligendi doloremque velit repellat atque nostrum
        reiciendis, ipsam recusandae dicta deserunt?
      </p>
    </div>
  </section>
</body>
<footer></footer>
</html>

修改后的CSS代码 #

@import url("https://fonts.googleapis.com/css2?family=DynaPuff:wght@600&family=Shadows+Into+Light&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "DynaPuff", cursive;
}

body {
  min-height: 100vh;
  background: linear-gradient(#cdc5b4, #b59da4);
  color: #fff;
}

/* 导航栏样式 */
.navbar-container {
  position: sticky;
  top: 0;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.navbar {
  max-width: 1560px;
  padding: 20px;
  font-size: 14px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: auto;
}

.navbar ul {
  display: flex;
  gap: 20px;
}

.navbar ul li {
  list-style: none;
}

.navbar ul li a {
  text-decoration: none;
  padding: 6px 15px;
  color: #fff;
  border-radius: 20px;
  transition: background-color 0.3s;
}

.navbar ul li a:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* 首页介绍区域 */
.hero-section {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.hello p {
  font-size: 1.2em;
  margin-bottom: 10px;
}

.hello h1 {
  font-size: 3em;
  margin-bottom: 15px;
}

.hello h3 {
  font-size: 1.1em;
  opacity: 0.8;
}

/* 内容板块通用样式 */
.content-section {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
}

.content-section div {
  max-width: 800px;
  width: 100%;
}

.content-section h2 {
  font-size: 2.5em;
  margin-bottom: 25px;
  text-align: center;
}

.content-section p {
  line-height: 1.6;
  font-size: 1em;
  opacity: 0.9;
}

关键调整说明 #

1. 移除绝对定位：将.hello的绝对定位替换为flex布局，让首页介绍区域占满整个视口高度，后续板块可自然排列在其下方
2. 统一类名大小写：将HTML中的Projects改为小写projects，确保CSS样式正常生效
3. 添加锚点跳转：给每个板块添加唯一ID，导航链接通过href="#id"实现点击跳转功能
4. 优化导航栏：设置导航栏为粘性定位（position: sticky），滚动时保持在顶部，提升用户体验
5. 统一板块样式：创建.content-section通用类，让所有内容板块保持一致的布局和间距，提升页面整洁度

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