如何让CSS中.top-container相对父元素定位？解决padding异常与白线问题

一、顶部白线的原因及修复 #

你看到的顶部白线，是因为.top-container设置了margin-top: 50px，直接删掉这个属性就能消除顶部空白。

二、padding不相对父元素的问题 #

你的.top-container里写了padding-top: 562.5%，这里有两个核心问题：

• 百分比单位的padding是相对于父元素宽度计算的，不是高度，会导致容器高度异常夸张，完全不符合预期。换成px或rem这类单位才对，比如padding-top: 100px。
• 你给所有div都设置了background-color: #e4f9f5，但.middle-container和.bottom-container不需要这个背景色，得单独覆盖它们的背景属性，否则页面样式会混乱。

三、其他需要调整的代码细节 #

• .bottom-cloud没设置position: absolute，因为.top-container是position: relative，必须给.bottom-cloud加上position: absolute，它才能相对于.top-container定位。
• .skill-row的margin写法错误，应该是margin: 100px auto（你写的margin-top: 100px auto 100px auto语法无效），而且text-emphasis要改成text-align: left。
• .copyright里的padding: 20px o是笔误，应该是padding: 20px 0。

修改后的关键代码片段 #

/* 移除全局div的背景色，给需要的容器单独设置 */
div {
  /* 删掉 background-color: #e4f9f5; */
}

.top-container {
  background-color: #e4f9f5;
  position: relative;
  padding-top: 100px; /* 替换为合理的单位和数值 */
  /* 移除 margin-top: 50px; */
}

.middle-container {
  margin: 100px 0;
  background-color: #fff; /* 按需覆盖背景色 */
}

.bottom-cloud {
  position: absolute; /* 添加绝对定位 */
  left: 250px;
  bottom: 300px;
  margin-right: 30px;
}

.skill-row {
  width: 50%;
  margin: 100px auto; /* 修正margin写法 */
  text-align: left; /* 替换错误的text-emphasis */
}

.copyright {
  color: #eaf6f6;
  font-size: 0.75rem;
  padding: 20px 0; /* 修正笔误 */
}

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