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

Question

我正在使用HTML / CSS部分中的freeCodeCamp进行练习。我现在还不了解JS。

我在我的网站上创建了一个固定位置的导航栏，当我滚动页面时，它并没有隐藏“下面”的一些元素。

当导航栏位于“上方”时，我想要隐藏“高级材质”和左侧的小图标。

navbar 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;
}

那里发生了什么，我该如何解决？

Answer 1

您的固定导航栏需要堆叠在页面上的所有其他元素之上。将z-index css属性添加到#header元素中，如下所示：

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

    /* other css properties below */
}