无法在 HTML、CSS 中正确定位某个部分
我正在创建一个投资组合网站，我想要在“关于”部分下面有一个“爱好”部分。当我第一次制作爱好部分时，它出现在 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>
