作品集页面Button错位与Section重叠问题求助

• 先直观确认重叠情况：给两个section临时加背景色和边框，快速定位问题
  在CSS里加：

  .home { background: #f5f5f5; border: 1px solid #ff4444; }
  .about { background: #e8f4f8; border: 1px solid #2196f3; }
  

  刷新页面就能一眼看到两个区块的位置关系，确认是不是真的重叠，以及重叠的范围。

• 排查高度塌陷问题：这是时隔很久做项目最容易踩的坑
  如果Home section里用了float布局（比如图片、文字浮动），但没做清除浮动处理，Home的高度会变成0，后面的About区块就会往上顶，覆盖Home的内容。解决方法：
  给Home区块加清除浮动的伪元素：

  .home::after {
    content: "";
    display: table;
    clear: both;
  }
  

  或者直接给Home设置overflow: hidden（注意如果有超出容器的元素会被裁剪，按需使用）。

• 检查定位属性：

  • 如果Home里的按钮用了position: absolute，要确保Home区块设置了position: relative，不然按钮会基于最近的有定位的父元素（甚至是body）定位，跑到About区域。
  • 看看两个section有没有用position: fixed/absolute，这类脱离文档流的定位会导致区块重叠，调整定位的参考父元素或者位置参数。

• 检查边距设置：
  看看Home的margin-bottom或者About的margin-top有没有负值，负值会直接导致两个区块重叠，把负值改成正常数值即可。

• 快速验证技巧：
  临时给Home设置min-height: 600px（数值比你的内容高就行），如果按钮回到了Home区域，说明就是Home高度塌陷导致的问题，直接用清除浮动的方法解决就行。

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