如何使用position relative实现footer固定在页面底部（附CSS代码）

嘿，刚好之前折腾过类似的布局需求，我来给你拆解下怎么实现～

首先得明确：单纯只给footer加position: relative是没法直接让它固定在页面底部的，因为relative是相对于元素自身原本的文档流位置进行偏移，它还是会跟着页面内容走。要实现固定到底部的效果，我们需要给父容器设置合适的高度规则，再配合一些布局技巧。

完整实现步骤与代码示例： #

1. 先让页面根容器占满整个浏览器视口高度，确保footer有明确的“底部”可以贴合：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

2. 给包裹所有页面内容的主容器设置position: relative，并让它撑满父容器高度，同时为footer预留出对应高度的空间：

.page-container {
  min-height: 100%;
  position: relative;
  padding-bottom: 60px; /* 这个值要和footer的高度保持一致 */
  box-sizing: border-box;
}

3. 最后给footer设置position: relative，通过负margin把它拉到容器的底部位置：

footer {
  background-color: #2E3639;
  position: relative;
  z-index: 1;
  height: 60px; /* 定义footer的固定高度 */
  margin-top: -60px;
  width: 100%;
}

逻辑说明： #

• 根容器设置height: 100%是为了让页面能撑满整个视口，避免内容不足时footer跑到页面中间。
• 主容器的padding-bottom是给footer预留空间，防止页面底部内容被footer遮挡。
• footer的负margin是把它从原本的文档流位置往上拉，刚好卡在容器的底部，配合position: relative保证它的定位是相对于父容器的。

如果你之前代码里的第一个选择器是指主内容容器，那调整一下高度和padding设置就能生效啦～

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