无法在 HTML、CSS 中正确定位某个部分-PHP中文网问答

我正在创建一个投资组合网站，我想要在“关于”部分下面有一个“爱好”部分。当我第一次制作爱好部分时，它出现在 about 部分上方，尽管我已将其编码在 HTML 中的 about 部分下方。现在，当我尝试使用 DevTools 将其放置在 about 部分下方时，它隐藏在 about 部分下方。我们将不胜感激您的帮助。

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    console.log(entry)
    if (entry.isIntersecting) {
      entry.target.classList.add('show');
    } else {
      entry.target.classList.remove("show");
    }
  })
})

const hiddenElements = document.querySelectorAll(".hidden");
hiddenElements.forEach((el) => observer.observe(el));

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgb(0, 118, 214);
}


* {
  margin: 0;
  padding: 0;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

#hero {
  background-color: darkgray;
  height: 100vh;
}

#hey {
  position: absolute;
  top: 228px;
  left: 46vw;
}

#name {
  position: absolute;
  top: 39vh;
  left: 39vw;
}

#line_1 {
  position: absolute;
  top: 50vh;
  left: 23vw;
}

#line_2 {
  position: absolute;
  top: 50vh;
  right: 21vw;
}

nav {
  position: fixed;
  top: -50px;
  left: 20.7vw;
  width: 100%;
  background-image: url("navbar.png");
  background-repeat: no-repeat;
  transition: top 0.2s ease-in-out;
  font-family: 'Playfair Display', serif;
}

nav ul {
  margin: 0;
  padding: 0;
  position: relative;
  right: 313px;
  list-style: none;
  text-align: center;
  font-size: larger;
}

nav li {
  display: inline-block;
  margin: 10px;
  margin-right: 25px;
}

nav a {
  display: block;
  padding: 10px;
  color: #fff;
  text-decoration: none;
}


nav:hover {
  top: 0;
}

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #ffffff;
}

.hover-underline-animation:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

#about {
  position: absolute;
  top: 111vh;
  left: 45vw;
  font-family: 'Playfair Display';
  width: 29vw;
}

#about h1 {
  font-size: xx-large;

}

#about h2 {
  font-size: large;
  position: relative;
  left: -13px;
  top: 48px;
}

#profile_pic {
  position: relative;
  bottom: 161px;
  right: 305px;
}

#india {
  position: relative;
  right: 276px;
  bottom: 163px;
  height: 56px;
}

.hidden {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 1s;
}

.show {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}

#blur_bg {
  animation: fadeInAnimation ease 3s;
  position: relative;
  bottom: 76vh;
  left: 28vw;
}

#blur_bg2 {
  animation: fadeInAnimation ease 3s;
  position: relative;
  bottom: 162vh;
  left: -58vw;
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

#hr {
  position: absolute;
  bottom: 145vh;
  right: -1vw;
  width: 50vw;
}

#hobbies {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

<!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>I'm Shardul Bhatkar</title>
    <link rel="stylesheet" href="index.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter&family=Playfair+Display:wght@500&display=swap" rel="stylesheet">
    <link rel="icon" type="image/x-icon" href="favicon.png">
    <script defer src="script.js"></script>
  </head>
  <body>
    <div id="hero">
      <nav>
        <ul>
          <li class="hover-underline-animation"><a href="#">Home</a></li>
          <li class="hover-underline-animation"><a href="#about">About</a></li>
          <li class="hover-underline-animation"><a href="#">Services</a></li>
          <li class="hover-underline-animation"><a href="#">Get in touch</a></li>
        </ul>
      </nav>
      <img id="hey" src="hey.png" alt="">
      <img id="name" src="name.png" alt="">
      <img id="line_1" src="line_1.png" alt="">
      <img id="line_2" src="line_2.png" alt="">
    </div>
    <section id="about">
      <h1 class="hidden">About Me</h1>
      <h2 class="hidden">
        I am a 14-year-old with a passion for technology and a love for science. In addition to being a podcaster and published author, I have a keen interest in web development and enjoy playing both cricket and table tennis. I also find gaming to be a great way to unwind.

        While I may be young, I am driven to explore the ever-evolving world of technology and constantly seek to expand my knowledge and skills in this field. Thank you for taking the time to get to know me better.
      </h2>
      <img class="hidden" id="profile_pic" src="profile pic.png" alt="">
      <img class="hidden" id="india" src="india 1.png" alt="">
      <img src="blur_bg.png" alt="" id="blur_bg">
      <img src="blur_bg2.png" alt="" id="blur_bg2">
      <img id="hr" src="hr.png" alt="">
    </section>

    <section id="hobbies">
      <h1>My Hobbies</h1>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit vel sit quasi quas. Unde laboriosam est eveniet modi culpa velit.</p>
    </section>
  </body>
</html>

/* width */ ::-webkit-scrollbar { width: 10px; } /* Track */ ::-webkit-scrollbar-track { background: #f1f1f1; } /* Handle */ ::-webkit-scrollbar-thumb { background: rgb(0, 118, 214); } * { margin: 0; padding: 0; } html, body { max-width: 100%; overflow-x: hidden; } html { scroll-behavior: smooth; } #hero { background-color: darkgray; height: 100vh; } #hey { /* position: absolute; */ top: 228px; left: 46vw; } #name { /* position: absolute; */ top: 39vh; left: 39vw; } #line_1 { /* position: absolute; */ top: 50vh; left: 23vw; } #line_2 { /* position: absolute; */ top: 50vh; right: 21vw; } nav { position: fixed; top: -50px; left: 20.7vw; width: 100%; background-image: url("navbar.png"); background-repeat: no-repeat; transition: top 0.2s ease-in-out; font-family: 'Playfair Display', serif; } nav ul { margin: 0; padding: 0; position: relative; right: 313px; list-style: none; text-align: center; font-size: larger; } nav li { display: inline-block; margin: 10px; margin-right: 25px; } nav a { display: block; padding: 10px; color: #fff; text-decoration: none; } nav:hover { top: 0; } .hover-underline-animation { display: inline-block; position: relative; color: #ffffff; } .hover-underline-animation:after { content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: 0; left: 0; background-color: #ffffff; transform-origin: bottom right; transition: transform 0.25s ease-out; } .hover-underline-animation:hover:after { transform: scaleX(1); transform-origin: bottom left; } #about { /* position: absolute; */ /* top: 111vh; left: 45vw; */ margin: auto; font-family: 'Playfair Display'; width: 29vw; } #about h1 { font-size: xx-large; } #about h2 { font-size: large; /* position: relative; */ left: -13px; top: 48px; } #profile_pic { /* position: relative; */ bottom: 161px; right: 305px; } #india { /* position: relative; */ right: 276px; bottom: 163px; height: 56px; } .hidden { opacity: 0; transform: translateX(-100%); transition: all 1s; } .show { opacity: 1; filter: blur(0); transform: translateX(0); } #blur_bg { animation: fadeInAnimation ease 3s; /* position: relative; */ bottom: 76vh; left: 28vw; } #blur_bg2 { animation: fadeInAnimation ease 3s; /* position: relative; */ bottom: 162vh; left: -58vw; } @keyframes fadeInAnimation { 0% { opacity: 0; } 100% { opacity: 1; } } #hr { /* position: absolute; */ bottom: 145vh; right: -1vw; width: 50vw; } #hobbies { /* position: relative; */ display: flex; flex-direction: column; align-items: center; }