Css 如何在页面中向下移动导航链接

每次我尝试将导航链接/导航栏向下移动约25px时，可单击的链接保持在顶部，但文本显示在我将其移动到的位置，因此导航链接不再可单击。 如何向下移动导航栏并确保实际文本可单击

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

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

.navbar{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
位置：相对位置；
背景色：黑色；
颜色：白色；
字体大小：20px；
}
.导航栏链接{
保证金：0；
填充：0；
显示器：flex；
}
.navbar链接李{
列表样式：无；
}
.导航栏链接李a{
文字装饰：无；
颜色：白色；
左：1rem；
右侧填充：1em；
垫面：1米；
显示：块；
}
.navbar链接li：悬停{
背景:#555；
}
.动画区{
背景：rgb（22168194）；
背景：线性梯度（0度，rgba（22168194,1）0%，rgba（27,28,28,1）
100%);
宽度：100%；
高度：100vh；
} 
.盒子区域{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：97%；
溢出：隐藏；
}
.盒子区域.盒子项目{
位置：绝对位置；
显示：块；
列表样式：无；
宽度：25px；
高度：25px；
背景：rgba（255，255，255，0.2）；
动画：动画正方形20s线性无限；
底部：-150px；
}
.盒子区域.盒子项目：第n个子项（1）{
左：86%；
宽度：80px；
高度：80px；
动画延迟：0秒
}
.盒子区域.盒子项目：第n个子项（2）{
左：12%；
宽度：30px；
高度：30px；
动画延迟：1.5s；
动画持续时间：10秒；
}
.盒子区域.盒子项目：第n个子项（3）{
左：70%；
宽度：100px；
高度：100px；
动画持续时间：5.5s；
}
@关键帧已设置动画的正方形{
0%{
变换：平移（0）旋转（0度）；
不透明度：1；
}
100%{
变换：translateY（-800px）旋转（360度）；
不透明度：0；
}
}

试试这个

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

---

我已经解决了这个问题！我在主屏幕上有一个动画背景，背景有

位置：绝对与导航栏冲突。我刚刚删除了
位置：绝对从背景中删除，并以不同的样式设置。
使用
边距
而不是
填充
谢谢，但不幸的是它不起作用。现在链接在页面的下方，但问题是它们不可点击@庞萨奇亚南