HTML/CSS固定元素在滚动时不隐藏其他元素

我正在做HTML/CSS部分的freeCodeCamp练习。到目前为止，我对JS一无所知

我在我的网站上做了一个固定位置的导航栏，当我在页面上滚动时，它不会隐藏一些“下面”的元素

我希望当导航栏位于“高级材质”和左侧的小图标上方时，它们都被隐藏

导航栏css代码：

#header{
  grid-area: nav;
  position: fixed;
  display: grid;
  grid-template-columns: 20% 40% 40%;
  background-color: rgb(198, 198, 198);
  border-radius: 5px;
  height: 60px;
  width: 100%;
  top:0px;
  left: 0px;
  rifth: 0px;
}

---

那里发生了什么事，我该怎么解决

您的固定导航栏需要堆叠在页面上所有其他元素的顶部。向

#header

元素添加css属性，如下所示：

#header{
    z-index: 1; // keep increasing this by 1 for as long as there are elements still overlapping the navbar

    /* other css properties below */
}

---

你能给其他元素css（图片）@ReversingHorse吗？我很高兴能帮上忙。干杯。@ReversingHorse如果这有助于您解决问题，请将其标记为正确答案。