Checkbox汉堡菜单点击后覆盖页面内容及Navbar关联问题求助

问题出在菜单用fixed定位脱离了文档流，导致它和导航栏没有布局关联，还会覆盖页面内容。改成absolute时没处理好父元素定位和默认隐藏逻辑，才出现隐藏问题。按以下步骤修改CSS即可解决：

关键CSS修改 #

/* 给导航栏添加相对定位，让内部绝对定位元素以它为参照 */
.navbar {
  position: relative;
}

#sidebarMenu {
  height: auto;
  /* 替换fixed为absolute，让菜单依附于导航栏 */
  position: absolute;
  overflow: auto;
  width: 100%;
  z-index: 100;
  /* 让菜单默认定位在导航栏底部 */
  top: 100%;
  /* 默认向上隐藏，完全处于导航栏上方 */
  transform: translateY(-100%);
  /* 添加过渡动画，让展开/收起更平滑 */
  transition: transform 0.3s ease;
}

input[type="checkbox"]:checked~#sidebarMenu {
  /* 选中时让菜单滑到导航栏下方 */
  transform: translateY(0);
  /* 移除原来的top:50px，现在靠top:100%定位 */
}

效果说明 #

• 菜单现在会紧贴导航栏下方展开，视觉上和导航栏完全关联，不再显得孤立。
• 展开时会推动页面内容向下，不会覆盖内容。
• 通过transform的过渡动画，菜单的展开/收起会更流畅自然。
• 汉堡按钮的定位不受影响，因为导航栏设为relative后，按钮的absolute定位依然以导航栏为参照。

内容的提问来源于stack exchange，提问作者KungK