position:fixed定位页脚a标签无法点击的原因及解决方法

核心原因是负z-index设置导致固定定位的页脚被压在了页面交互层下方，和position: fixed属性本身无关：

• 你给.footer-parallax设置了z-index: -121，该值会让页脚脱离默认堆叠顺序，落到根容器（<html>/<body>）的渲染层之下。
• 你给main元素设置的margin-bottom仅在视觉上留出了显示页脚的空白区域，但这部分空白区域的鼠标交互事件仍然归属上层的main/根容器，事件根本无法传递到被压在下层的页脚元素上，因此不会触发手型光标、也无法响应点击。
• 移除main元素后链接可正常点击，正是因为上层遮挡交互的元素消失，事件可以正常触达页脚。
• 同类视差页脚实现无此问题，本质是那些实现的固定页脚使用了合理的层级设置，没有被压到根层下方。

优先选择改动最小、兼容性最好的层级调整方案：

1. 移除页脚的负z-index设置，将其调整为较低的正z-index值
2. 给主内容main元素设置相对定位、更高的正z-index值，同时配置不透明背景，保证主内容滚动时能正常覆盖下方页脚，实现原本的视差露出效果

对应参考代码：

/* 主内容块样式调整 */
main {
  position: relative;
  z-index: 1;
  /* 保留你原本设置的、和页脚高度一致的margin-bottom */
  margin-bottom: 300px; /* 替换为你实际的页脚高度 */
  background: #ffffff; /* 必须设置不透明背景，避免滚动时主内容透出下方页脚 */
}

/* 页脚样式调整 */
.footer-parallax {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0; /* 替换原本的-121，层级低于main即可 */
}

调整完成后，可直接通过开发者工具验证：鼠标悬停在页脚链接上会正常显示手型光标，点击可正常跳转，说明修复生效。

不推荐使用保留负z-index、给body单独设置堆叠上下文的方案，该方案在部分移动端浏览器存在兼容性问题，容易出现其他交互异常。

内容的提问来源于stack exchange，提问作者János