求助：点击汉堡导航图标后下拉菜单显示异常（内容被遮挡）

针对你遇到的导航菜单被遮挡、无法显示全白背景的问题，直接调整以下CSS即可实现需求：

/* 菜单展开时，让头部容器变成全屏固定白色背景 */
body.menu-open .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  z-index: 9999;
  padding-bottom: 20px; /* 给菜单底部预留少许空间 */
}

/* 避免菜单内容过长时被截断 */
body.menu-open .site-header__menu {
  max-height: calc(100vh - 70px);
  overflow-y: auto;
}

/* 菜单展开时禁止页面滚动 */
body.menu-open {
  overflow: hidden;
}

为什么之前的设置没生效？ #

你之前只给.site-header设置了position: relative和z-index，但这种定位方式无法让容器占据全屏空间，也没法固定在页面顶部覆盖其他内容。改成fixed定位后，容器会脱离文档流，从顶部开始铺满左右宽度，再配合白色背景和足够高的z-index，就能完全覆盖页面其他元素，同时底部内边距满足“延伸至菜单底部下方少许”的要求。

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