Portfolio导航栏故障求解：HTML+CSS+Flexbox移动端汉堡菜单异常

• 层级覆盖问题：你设置了header为sticky定位但未指定z-index属性，页面滚动后，body中的正文内容层级会高于header，导致你点击汉堡按钮时实际选中的是下层的文本内容，无法触发复选框的状态变更，所以菜单无响应。
• 菜单高度溢出问题：移动端视图下的.navlinks同时设置了top: 90px和height: 100vh，总高度比视口高度多出90px，菜单底部会被视口截断，就会出现半显示的故障。

只需修改两处CSS配置即可修复所有问题：

1. 给header选择器添加z-index: 999属性，确保导航栏永远处于页面最上层，不会被内容覆盖：

header {
  background-color: #141b25;
  position: sticky;
  top: 0;
  right: 0;
  width: 100%;
  z-index: 999; /* 新增此行 */
}

2. 调整移动端媒体查询内.navlinks的高度为calc(100vh - 90px)，让菜单高度刚好适配视口剩余空间，不会溢出：

@media (max-width: 800px) {
  .navlinks {
    top: 90px;
    position: fixed;
    width: 100%;
    height: calc(100vh - 90px); /* 将原100vh替换为此行 */
    text-align: center;
    transition: all 0.5s;
    right: -100%;
    background: #222831;
  }
  /* 其余原有代码无需修改 */
}

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