footer移出main标签后显示错位（位于header与main之间）求助

首先，问题的核心是绝对定位元素把main的高度“掏空”了，导致footer移到main外面后，找不到正确的底部位置，直接跑到视觉上的中间区域了。

问题根源 #

你代码里的.bg-main-big、.bg-flow这些元素都用了position: absolute，这种定位会让元素脱离正常的文档流——简单说就是，浏览器计算main高度的时候，完全不会考虑这些元素的高度，main的高度只由.article-1这类没脱离流的元素决定，远小于你视觉上看到的页面高度。之前footer嵌套在main里时，哪怕main高度塌陷，footer作为子元素还能“蹭”着main的视觉高度待在底部，但移出来后就只能跟着main的实际高度走，所以就跑到中间了。

快速修复（两种方法任选） #

方法1：给main强制设置最小高度 #

找到你CSS里的main样式，改成这样：

main{
  margin-top: 7rem;
  position: relative; /* 让内部绝对定位元素以main为基准定位 */
  min-height: 220rem; /* 数值可以根据你页面实际高度微调，确保能覆盖所有内容 */
}

方法2：修复footer自身的高度塌陷问题 #

你的.footer-img也是绝对定位，会导致footer本身高度塌陷，顺便把footer的样式也调整一下：

footer{
  position: relative;
  padding-top: 30rem; /* 和.footer-img的height保持一致，避免内容被背景图盖住 */
}

.footer-img{
  background-image: url(../assets/img/footer-splashes-01.svg);
  background-repeat: no-repeat;
  height: 30rem;
  width: 100%;
  position: absolute;
  top: 0; /* 让背景图固定在footer最顶部 */
  left: 0;
}

额外优化建议 #

如果你不想硬写min-height，也可以给.article-3加个足够大的margin-bottom，让main被自然撑开：

.article-3{
  display: flex;
  margin-top: 45rem;
  margin-bottom: 15rem; /* 数值根据.bg-flow的高度调整，确保覆盖背景图的底部 */
}

为什么之前嵌套在main里没问题？ #

当footer在main内部时，哪怕main的实际高度很小，footer作为子元素会跟着main的边界走，而main因为内部有绝对定位的背景图，视觉上高度很高，所以footer看起来就在底部。但移到main外面后，footer就只能跟着main的实际高度（没被绝对定位元素撑开的高度）来定位，所以就跑到中间了。

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