absolute定位navbar被表单input覆盖且保留移动端布局的解决方法

你只需要修改两处CSS代码即可实现需求，不会改动原有导航栏的桌面端外观，同时修复移动端层级和布局问题：

1. 给导航栏添加定位属性和层级值，提升整体导航的层级优先级

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  background-color: #547430;
  color: #fff;
  /* 新增以下两行 */
  position: relative;
  z-index: 9999;
}

2. 修正移动端菜单的定位偏移，避免父元素加定位后菜单错位
   找到@media (max-width: 900px)媒体查询内的.menu规则，新增top: 100%属性，同时可将原有height: 100%改为height: 100vh，保证菜单能占满剩余视口高度：

@media (max-width: 900px) {
  .menu {
    display: block;
    position: absolute;
    background-color: #547430;
    margin-top: 5px;
    text-align: left;
    height: 100vh; /* 原为100%，修改后更符合全屏菜单的预期效果 */
    width: 100%;
    padding: 16px 0;
    transition: all 0.3s ease;
    left: -100%;
    /* 新增以下一行，修正定位基准变化后的偏移问题 */
    top: 100%;
  }
  /* 其余原有代码保持不变 */
}

效果说明 #

• 桌面端导航栏外观、交互逻辑完全不变，没有任何样式改动
• 移动端展开的导航菜单会正确对齐在导航栏底部下方，不会和Logo重叠，不会破坏原有布局
• 导航栏整体层级高于页面所有普通内容，不会出现表单复选框、按钮等元素覆盖导航的问题

内容的提问来源于stack exchange，提问作者A. Vreeswijk