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

Question

我的页面顶部有一个部分透明的导航栏：

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

页面的背景是画布。

问题是当我向下滚动时，内容不会消失在我的导航栏后面，因为导航栏是部分透明的。我只希望页面背景和导航栏显示在导航栏区域而不是内容

标签： htmlcsswebnavbar

Answer 1

用这个！

.navbar {
position: absolute !important;
}