修复用Flexbox制成的NAV栏到页面顶部，但是当您滚动滚动时，请覆盖NAV栏

Question

因此，我创建了一个带有Flex Box的导航栏。我目前周围有一个包装纸，以便可以将其固定在顶部。此功能正常，当您加载页面时，导航栏看起来不错。但是，当您向前滚动时，Navbar将被覆盖的页面界限。我将如何避免这种情况（我在下面附上图像以表明我的意思）。

滚动之前

“ rel =“ nofollow noreferrer”>滚动后

<div class="wrapper">
    <nav>
      <a href="index.html" class="logo"><img src="assets/logo.png"></a>
      <div class ="nav-links">
        <a href="#">About</a>
        <a href="#">Portfolio</a>
        <a href="#">Contact</a>
      </div>
    </nav>
  </div>

nav {
  background-color: rgba(0,0,0,.5); /*background color*/
  height: 75px; /*height of navigation bar*/
  display: flex; /*activates flexbox properties*/
  align-items: center; /*uses flexbox to vertically center items*/
  -webkit-backdrop-filter: blur(8px); /*blurs background*/
  backdrop-filter: blur(8px); /*blurs background*/
  padding-left: 20px;
  padding-right: 20px;
  justify-content: space-between;
}

.wrapper {
  position: fixed;
  width: 100%;
}

Answer 1

重置默认保证金和填充后似乎没有问题：

body {
  margin: 0;
  padding: 0;
}