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属性添加到# your models.py MY_PET_IMAGE_URL_CHOICES = { # this variate per your pet choices {'CAT': 'static/cat_url...'}, ... } class YourUserProfile(models.Model): ... pet_field = ... ... def get_pet_url(self): # You can make what you want. I just use dict for example url = MY_PET_IMAGE_URL_CHOICES[self.pet_fieid] return url 元素中：

#header