CSS实现表格上移时不带动下方文本的解决方案

核心问题分析 #

你当前的错误在于：

• 将定位、margin属性错误应用到了<th>/<td>单元格上，而非<table>容器本身
• 使用负margin时，由于margin属于文档流范畴，会拉动后续元素同步位移；错误给单元格添加position: relative/top属性，导致表格样式混乱

推荐解决方案：相对定位法 #

相对定位的元素会保留原文档流占位，仅视觉上移动，完全不会影响后续元素位置。

修改后的CSS代码：

/* 给table容器单独设置定位和位移 */
table {
  position: relative;
  top: -150px; /* 向上移动150px */
  margin-left: 500px; /* 保持你的左偏移需求 */
}

/* 单元格仅保留样式属性 */
th, td {
  border: 3px solid black;
  background-color: antiquewhite;
  border-collapse: collapse;
  width: 10%;
}

/* 你的Steps类样式保持不变 */
.Steps {
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  position: relative;
  top: -15px;
  font-size: large;
  color: blueviolet;
  font-weight: bold;
}

备选方案：负margin+抵消法 #

如果坚持使用负margin，需给表格后的第一个元素设置正margin-top抵消位移影响：

table {
  margin-top: -150px;
  margin-left: 500px;
}

/* 给表格后的第一个h2添加抵消margin */
table + h2 {
  margin-top: 150px; /* 数值与表格负margin一致 */
}

th, td {
  border: 3px solid black;
  background-color: antiquewhite;
  border-collapse: collapse;
  width: 10%;
}

.Steps {
  /* 保持原有样式 */
}

之前尝试方法的问题说明 #

1. position: fixed/absolute：这类定位会让元素脱离文档流，若未给父容器设置position: relative，表格会相对于整个页面定位，导致坍塌、位置偏移
2. 给<th>/<td>加top: -150px：每个单元格单独相对自身位移，必然导致整体样式混乱

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