响应式模式降低视口高度时导航菜单异常置顶显示故障排查

你的导航样式存在定位属性冲突：
给绝对定位的.main-navigation同时设置了top: -100%和bottom: 0两个对立方向的定位属性，属于过约束定位写法，浏览器在不同视口尺寸下的计算逻辑会出现偏差，你手动设置的height: 100%也会被定位规则覆盖失效。
而transform: translateY()的位移百分比是基于元素自身实际高度计算的，当你在响应式模式下调低视口高度时，元素实际渲染高度和预期高度不一致，关闭状态下的位移量不足以把导航完全移出视口，就会出现导航异常露在顶部的问题。
另外你写的transition: all会给所有变化的属性加过渡，视口尺寸变化时也可能触发非预期的位移动画。

• 移除定位冲突属性
  删掉.main-navigation里的bottom: 0，保留top: -100%和height: 100%，确保导航关闭状态下刚好整体位于视口上方外侧，高度和视口/定位父级高度一致。
• 补全必要的基础样式
  给定位父级（通常是body）加position: relative，同时给根元素加横向溢出隐藏，避免视口外的导航触发滚动条、定位参考错乱。
• 优化过渡属性
  把transition: all 500ms改成transition: transform 500ms，只给位移动画加过渡，减少不必要的性能消耗和异常动画。

修正后的完整CSS代码：

/* 全局重置，避免浏览器默认边距影响定位 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

.main-navigation {
  position: absolute;
  height: 100%;
  top: -100%;
  left: 0;
  right: 0;
  background-color: #fffefc;
  transform: translateY(0);
  transition: transform 500ms;
  z-index: 999;
}

/* 导航打开状态类 */
.navigation-open {
  transform: translateY(100%);
}

你现有的JS交互逻辑没有问题，不需要修改，替换CSS后即可正常在所有视口尺寸下实现导航滑入滑出的效果。

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