css - 如何将导航链接移至页面下方

Question

每次我尝试将导航链接/导航栏向下移动约 25 像素时，可点击的链接都会保留在顶部，但文本会出现在我将其移动到的位置，因此导航链接不再可点击。如何向下移动导航栏并确保实际文本可点击？

注意:我已经多次尝试使用边距和填充。当我使用边距时，链接根本不可点击。

更新:该问题与动画背景有关，因为当我删除背景时，导航栏工作正常。我已经用背景代码更新了我的帖子。

 .navbar {
 display: flex;
 justify-content: space-between;
 align-items: center;
 position: relative;
 background-color: black;
 color: white;
 font-size: 20px;
 }

 .navbar-links ul {
 margin: 0;
 padding: 0;
 display: flex;
 }

  .navbar-links li {
  list-style: none;
  }
  .navbar-links li a {
  text-decoration: none;
  color: white;
  padding-left: 1rem;
  padding-right: 1em;
  padding-top: 1em;
  display: block;
  }

.navbar-links li:hover {
   background: #555;
  }
.animation-area {
background: rgb(22,168,194);
background: linear-gradient(0deg, rgba(22,168,194,1) 0%, rgba(27,28,28,1) 
100%);
width: 100%;
height: 100vh;
} 
 
.box-area{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 97%;
overflow: hidden;
}

.box-area .box-item{
position: absolute;
display: block;
list-style: none;
width: 25px;
height: 25px;
background: rgba(255, 255, 255, 0.2);
animation: animatedSquares 20s linear infinite;
bottom: -150px;
}

.box-area .box-item:nth-child(1){
left: 86%;
width: 80px;
height: 80px;
animation-delay: 0s
   }

.box-area .box-item:nth-child(2){
left: 12%;
width: 30px;
height: 30px;
animation-delay: 1.5s;
animation-duration: 10s;
}
.box-area .box-item:nth-child(3){
left: 70%;
width: 100px;
height: 100px;
animation-duration: 5.5s;
}

@keyframes animatedSquares{
0%{
  transform: translateY(0) rotate(0deg);
  opacity: 1;
 }
 100%{
  transform: translateY(-800px) rotate(360deg);
  opacity: 0;
}
}

   <div class="banner-text">
          <nav class="navbar">
            <a href="#" class="toggle-button">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
            </a>
            <div class="navbar-links">
            <ul>
           <li><a class="navlink" href="#">Page 1</a></li>
            <li><a class="navlink" href="#">Page 2</a></li>
            <li><a class="navlink" href="#">Page 3</a></li>
            <li><a class="navlink" href="#">Page 4</a></li>
          </ul>
          </div>
        </nav>
          </div>
 <div class="animation-area">
        <ul class="box-area">
          <li class="box-item"></li>
          <li class="box-item"></li>
          <li class="box-item"></li>
          <li class="box-item"></li>
          <li class="box-item"></li>
          <li class="box-item"></li>
        </ul>
      </div>  

Answer 1

试试这个

.navbar-links li {
  list-style: none;
  margin-top: 1rem;
 }
.navbar-links li a {
  text-decoration: none;
  color: white;
  padding: .363rem;
  display: block;
 }