如何使部分透明的导航栏后面的内容消失？

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

使用它！

.navbar {
position: absolute !important;
}

Answer 2

我认为您的意思是“位置：固定”。即使您向下滚动，它也会修复您的导航栏

position: fixed;