Фиксированный элемент HTML / CSS не скрывает другие элементы при прокрутке

Question

Я делаю упражнение из freeCodeCamp в разделе HTML / CSS.На данный момент я не знаю JS.

Я сделал навигационную панель с фиксированной позицией на своем веб-сайте, и когда я прокручиваю страницу, она не скрывает некоторые элементы «под ней».

Я хочу, чтобы и «премиальные материалы», и маленькая иконка слева были скрыты, когда навигационная панель «над ними».

код CSS navbar:

#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

Ваш фиксированный navbar должен располагаться поверх всех других элементов на вашей странице.Добавьте свойство 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 */
}