html - 导航栏-固定位置

向下滚动网站上的页面时，我需要将网站上的导航栏固定在适当的位置。我认为我已将代码正确地固定了下来，但是当我向下滚动时，它对页面的图像/部分而言是透明的-我希望它牢固，以便各部分在其后滚动。

这是我目前的代码-

<header>
        <nav>
            <a href="#logo">Home</a>
            <a href="#whatwedo">What we do</a>
            <a href="#whoweare">Who we are</a>
            <a href="#partners">Who we work with</a>
            <a href="#contact">Say hello</a>
            <a href="Blog">Blog</a>
        </nav>
</header>

style.css

header {
  height: 50px;
  background-color: #fff;
}

nav {
    overflow: hidden;
  text-align: center;
  padding: 10px;
  background-color: #fff;
  position: fixed;
  top: 0;
  width: 100%;

}

nav a {
  color: #000000;
  text-decoration: none;
  display: inline-block;
  padding: 15px;
  border-bottom: 2px solid transparent;

}

最佳答案

将nav元素的z-index更改为999，然后向图像/部分添加position：relative和z-index：1