Flex响应式导航汉堡菜单展开挤压下方内容问题求解决方案

修复方案 #

你只需要修改3处代码即可解决汉堡菜单挤压页面内容的问题，不需要调整现有flex布局结构，也不需要引入浮动逻辑：

1. 替换你现有CSS中的.active选择器样式，补全绝对定位所需的偏移、宽度等属性：

.active {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: navy;
  z-index: 1000;
  margin: 0;
  padding: 0;
}

2. 删除你CSS中.main-nav li规则里的无效代码position:，这段未赋值的属性会影响样式解析。
3. 你页面body里重复写了两次相同的菜单点击事件JS代码，删除其中一份即可，避免重复绑定事件。

原理解释 #

你之前给.active加绝对定位不生效，是因为没有指定定位偏移值和宽度，菜单仍默认占据文档流空间，才会挤压下层内容。修改后菜单会完全脱离文档流，定位在导航栏底部、覆盖在页面上层，不会影响其余内容的布局位置。

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