首页内容不足时固定section至页脚上方导致导航遮挡的问题

问题分析 #

你遇到的核心问题其实很好拆解：

• 用position: fixed定位底部区域后，这个元素会脱离正常文档流，默认显示层级比普通导航栏高，所以iPad上打开导航时会被它挡住；
• vertical-align: bottom是用来对齐行内/行内块元素的，对块级元素的定位完全不起作用，难怪你试了没效果。

解决方案一：调整层级关系（快速解决遮挡） #

既然是层级覆盖导致的问题，直接用z-index控制元素显示顺序就搞定了：

1. 给你的导航栏设置更高的z-index值（注意导航的定位不能是默认的static，得改成relative或者absolute，z-index才会生效）；
2. 给section.info设置较低的z-index，让它乖乖待在导航下方。

修改示例：

/* 替换成你实际的导航类名 */
nav {
  position: relative; 
  z-index: 100; /* 数值只要比section.info大就行 */
}

section.info {
  /* 如果还要保留fixed定位的话 */
  position: fixed;
  bottom: 50px;
  z-index: 50; /* 低于导航的层级 */
  /* 你的其他原有样式... */
}

解决方案二：用Flex布局替代Fixed定位（更稳妥的底部布局） #

如果不需要section.info一直悬浮在页面底部，只是希望它位于页面内容的最下方（页脚上方50px），我更推荐用Flex布局实现，从根源上避免层级冲突：

1. 给页面根容器（比如body或者最外层的容器）设置Flex垂直布局，确保内容能铺满整个视口高度；
2. 让中间的内容区（比如section.hero）自动拉伸剩余空间，把section.info自然挤到页面底部。

修改示例：

/* 先重置页面默认边距，确保能铺满视口 */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* 给body设置Flex垂直布局 */
body {
  display: flex;
  flex-direction: column;
}

/* 让hero区域自动填充剩余空间，把info推到底部 */
section.hero {
  flex: 1;
  /* 你的其他原有样式... */
}

/* 移除fixed定位，改用relative调整和页脚的距离 */
section.info {
  position: relative;
  bottom: 50px;
  /* 你的其他原有样式... */
}

针对你现有CSS的小建议 #

看你的媒体查询代码，section.info在不同断点下的定位属性来回切换（relative → absolute → unset），很容易导致布局混乱。建议统一逻辑：要么全用Flex布局适配所有设备，要么在每个断点都明确设置z-index，确保导航始终在最上层。

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