如何用HTML/CSS上移元素，避免与后续section之间产生空隙？

以下是几种非hack的标准CSS方案，解决你遇到的定位后底部空隙问题：

• 负margin + 容器溢出隐藏
  给承载拖把的flex容器设置负的margin-top来实现上移，同时给当前section添加overflow: hidden，避免内容溢出到上方section。这种方式会让section的高度自动适应上移后的拖把底部，后续section会自然贴合，无需额外调整。

  .target-section {
    overflow: hidden;
  }
  .mop-flex-container {
    margin-top: -70px; /* 根据实际需要调整上移距离 */
    display: flex;
    /* 你的flex布局相关样式 */
  }
  

• CSS Grid 层叠布局
  将当前section设为grid容器，让波浪图和拖把容器共享同一网格区域，直接控制两者的层叠关系与位置。波浪图作为底层，拖把容器在上层，通过align-items: flex-end保证拖把底部与section底部对齐，section高度会自动适配拖把高度，后续section无缝衔接。

  .target-section {
    display: grid;
  }
  .wave-image {
    grid-row: 1 / -1;
    grid-column: 1 / -1;
    width: 100%;
    margin-top: -60px; /* 实现覆盖前一个section的效果 */
  }
  .mop-flex-container {
    grid-row: 1 / -1;
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-end;
    margin-top: -80px; /* 上移实现与波浪重叠 */
  }
  

• 相对定位 + 容器内边距补偿
  如果用position: relative让拖把容器上移，因为相对定位不会改变元素的占位空间，你可以给section添加等量的padding-top来补偿，这样section的高度会包含这个内边距，拖把上移后section底部仍与拖把底部对齐，后续section不会出现空隙。

  .target-section {
    padding-top: 70px; /* 与top的数值一致 */
  }
  .mop-flex-container {
    position: relative;
    top: -70px;
    display: flex;
  }
  

这些方案都是基于CSS标准布局特性实现，不会破坏页面的正常布局流，也不需要对后续section做批量调整。

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