如何让我的响应式导航栏在打开时覆盖我的内容？

<div class="navbar-container">
  <!-- 导航栏内容 -->
</div>

<div class="content-container">
  <!-- 页面主要内容 -->
</div>

.navbar-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #333;
  z-index: 9999; /* 设置一个较高的层级，确保导航栏在内容上方显示 */
}

.content-container {
  margin-top: 60px; /* 根据导航栏的高度设置合适的上边距 */
}

const navbarContainer = document.querySelector('.navbar-container');
const openButton = document.querySelector('.open-button');

openButton.addEventListener('click', function() {
  navbarContainer.style.display = 'block'; // 显示导航栏容器
  document.body.style.overflow = 'hidden'; // 隐藏页面滚动条
});

// 添加关闭导航栏的功能，可以根据实际需求来实现