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

时间:2019-02-17 18:05:26

标签: html css html5 css3 z-index

我正在HTML / CSS部分的freeCodeCamp中进行锻炼。到目前为止,我还不了解JS。

我在网站上做了一个固定位置的导航栏,当我滚动浏览该页面时,它并没有隐藏页面“下面”的某些元素。

enter image description here

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

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

发生了什么事,我该如何解决?

1 个答案:

答案 0 :(得分: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