我的问题是，每当我向下滚动时，a就会完全覆盖导航栏。导航栏是固定的，并设置在顶部。HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<link
href="https://fonts.googleapis.com/css2?family=Gotu&display=swap"
rel="stylesheet"
/>
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./style.css" />
<title>Pelicans</title>
</head>
<body>
<div class="navbar">
<a href="#home"
><img
class="logo"
height="100"
src="https://scontent-lax3-1.xx.fbcdn.net/v/t31.0-1/p200x200/15068898_1226936174051780_7166698313496052354_o.jpg?_nc_cat=101&_nc_sid=dbb9e7&_nc_ohc=ocyXiBkw3rcAX8xha1J&_nc_ht=scontent-lax3-1.xx&_nc_tp=6&oh=a21d0f67f860f6befb0cdc68e01c3c2a&oe=5EB3D4BA"
width="100"
alt=""
/></a>
<a class="link" href="#home">Home</a>
<a class="link" href="#about">About</a>
<a class="link" href="#gallery">Gallery</a>
<a class="link-contact" href="#contact">Contact</a>
</div>
<section id="home"></section>
<section id="about"></section>
<section id="gallery"></section> <!-- Not in use yet -->
<section id="contact"></section> <!-- Not in use yet -->
</body>
</html>
CSS：
body {
background-color: #5cdb95;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
padding: 1em;
padding-top: 0em;
padding-bottom: 0em;
grid-gap: 0em;
background: #edf5e1;
grid-auto-rows: minmax(100px, auto);
border-bottom-style: solid;
border-bottom-color: #05386b;
font-family: "Gotu", sans-serif;
font-size: 25px;
}
.navbar > .link {
text-align: center;
text-decoration: none;
height: 100px;
padding: 32px;
transition: background-color 0.7s;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
font-family: inherit;
}
.navbar > .link:hover {
background-color: #8ee4af;
font-family: inherit;
}
.logo {
border-radius: 50%;
}
.link-contact {
padding-top: 0.6em;
text-align: center;
height: 65px;
width: 180px;
background-color: #379683;
text-decoration: none !important;
border-radius: 20px;
color: #edf5e1;
transition: background-color 0.7s;
font-family: inherit;
}
.link-contact:hover {
text-decoration: none !important;
color: #edf5e1;
background-color: #287566;
font-family: inherit;
}
#home {
background-color: blue;
height: 680px;
}
#about {
background-color: inherit;
height: 680px;
position: relative;
}
注意：第一部分与导航栏不重叠，仅与第二部分重叠。堆栈溢出告诉我，这个问题太多是代码，所以这里有一些文字...
z-index问题正在发生。
像这样给它：
#about {
background-color: inherit;
height: 680px;
position: relative;
z-index: -99;
}