如何仅通过设置moving-div的CSS让background-div下移至其下方

API 探路者

2026-7-2

解决方案说明

由于HTML结构中background-div位于moving-div之前，文档流的渲染顺序是先处理background-div再处理moving-div，仅通过修改moving-div的CSS无法直接让background-div垂直下移到moving-div的下方——因为文档流中前面的元素不会受到后面元素布局的影响。

不过可以根据你的需求提供两种替代方案：

方案1：调整层叠顺序（视觉上让background-div在下方）

如果你的需求是让background-div在视觉上位于moving-div下方（即被moving-div覆盖），只需给moving-div添加z-index属性即可（实际上当前默认的层叠顺序已经是moving-div在上，此操作可确保兼容性）：

.moving-div {
  width: 100%;
  background: yellow;
  position: absolute;
  top: 120px;
  z-index: 1;
}

方案2：修改定位方式，实现无重叠布局（需调整moving-div的position）

如果必须让background-div和moving-div在垂直方向上不重叠，可以将moving-div的定位方式改为relative，通过负margin上移到header下方，同时利用padding-bottom占据文档流空间，让后续元素（若有）下移。但注意此方案无法改变background-div的位置，而是调整moving-div的位置使其避开background-div：

.moving-div {
  width: 100%;
  background: yellow;
  position: relative;
  margin-top: -120px; /* 上移至header下方 */
  padding-bottom: 120px; /* 预留background-div的高度空间 */
}

此方案中moving-div会覆盖background-div，但如果需要让background-div显示在下方，可给background-div添加z-index: 2——但你提到无法修改background-div的CSS，因此此方案仅适用于允许moving-div覆盖background-div的场景。