如何不使用position absolute将table#footer推至页面底部并置于div#text之后？

没问题，我来帮你搞定这个布局问题。你的DOM结构里footer在text前面，但要实现footer固定在页面底部、且视觉上text在footer上方的效果，不用position: absolute的话，Flexbox或者CSS Grid都是非常合适的现代布局方案，兼容性也很可靠。

方案一：Flexbox 实现 #

核心思路是让容器占满整个视口高度，通过垂直方向的flex布局调整元素顺序，再让文本区域占据剩余空间，自然把footer挤到底部。

代码示例：

/* 重置默认边距，避免浏览器默认样式干扰布局 */
body {
  margin: 0;
}

#container {
  /* 把容器转为flex布局容器 */
  display: flex;
  /* 设置元素垂直排列 */
  flex-direction: column;
  /* 让容器至少占满视口高度 */
  min-height: 100vh;
}

#text {
  /* 调整显示顺序，让text在footer之前展示 */
  order: -1;
  /* 占据容器内除footer外的所有剩余空间，将footer推至底部 */
  flex: 1;
}

#footer {
  /* 可选：给footer加背景色，方便直观看到效果 */
  background-color: #f5f5f5;
}

方案二：CSS Grid 实现 #

Grid布局的逻辑更直观，直接定义行高分配规则，再通过指定元素所在行来调整显示顺序。

代码示例：

body {
  margin: 0;
}

#container {
  /* 把容器转为grid布局容器 */
  display: grid;
  /* 定义两行：第一行占满剩余空间，第二行自适应内容高度 */
  grid-template-rows: 1fr auto;
  min-height: 100vh;
}

#text {
  /* 指定text放在第一行 */
  grid-row: 1;
}

#footer {
  /* 指定footer放在第二行 */
  grid-row: 2;
  background-color: #f5f5f5;
}

这两个方案都完全避开了position: absolute，既能把footer稳稳推到页面底部，又能让text在视觉上显示在footer上方，完美匹配你的需求。你可以根据自己的布局习惯任选其一，效果是一致的。

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