如何修复Div重叠与横向滚动问题？页面布局调试求助

你的问题核心在于用了position: absolute——这个属性会让元素脱离正常文档流，完全不占据页面空间，自然会和前面的IntroDiv重叠。另外left:10%加50px的padding，很容易让元素总宽度超出视口，触发横向滚动。

直接按下面的步骤修改：

• 移除position: absolute和left:10%，让AboutMe区块回到正常文档流，它会自动排在IntroDiv下方
• 用max-width: 100%限制元素宽度，配合box-sizing: border-box让padding算在宽度内，避免撑爆容器
• 给body加overflow-x: hidden，彻底禁用横向滚动

修改后的AboutMe CSS #

div.AboutMe {
  max-width: 100%;
  padding: 50px;
  margin: 0 auto; /* 可选，让区块水平居中 */
  box-sizing: border-box; /* 关键：padding不额外增加元素宽度 */
}

全局补充CSS #

body {
  margin: 0;
  overflow-x: hidden; /* 强制禁止横向滚动 */
}

完整可运行示例 #

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      overflow-x: hidden;
    }
    div.IntroDiv {
      padding: 50px;
      background-color: #f5f5f5;
    }
    div.AboutMe {
      max-width: 100%;
      padding: 50px;
      margin: 0 auto;
      box-sizing: border-box;
      background-color: #e8e8e8;
    }
  </style>
</head>
<body>
  <div class="IntroDiv">
    <h1>Intro Section</h1>
    <p>这里是页面的介绍内容，占据正常文档流空间</p>
  </div>
  <div class="AboutMe">
    <h2>About Me</h2>
    <p>这里是关于我的内容，现在会自动排在Intro区块下方，且不会触发横向滚动</p>
  </div>
</body>
</html>

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