Как я могу сделать так, чтобы контент за частично прозрачной навигационной панелью исчезал?

Question

У меня частично прозрачная панель навигации вверху моей страницы:

<div class="navbar">
   Content
</div>
.navbar {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 999;
  background-color: rgba(212, 0, 255,0.3);
}

Фон страницы - это холст.

Проблема в том, что при прокрутке вниз содержимоене исчезает за моей панелью навигации, потому что панель навигации частично прозрачна.Я только хочу, чтобы фон страницы и панель навигации отображались в области панели навигации, а не содержимое

Answer 1

Я думаю, что вы имеете в виду «позиция: фиксированная».Он исправит вашу навигационную панель, даже когда вы прокрутите вниз

position: fixed;

Answer 2

Используйте это!

.navbar {
position: absolute !important;
}