如何用CSS将一个section置于另一个下方？求助解决margin无效问题

首先咱们先理清你遇到的问题：默认情况下HTML元素是按文档流顺序渲染的，所以.first.section会自然出现在.second.section上方。你用margin-top尝试下移第一个section却只产生空白，大概率是因为section元素设置了脱离文档流的定位（比如position: absolute/fixed），或者父容器的特殊布局导致第一个元素下移后，第二个元素没有跟随调整位置。

下面给你几种不用修改DOM结构就能实现视觉上第一个section在第二个下方的方法：

方法1：使用Flexbox布局（推荐） #

这种方法简单且兼容性好，只需给两个section的父容器添加Flex布局并反转子元素排列顺序：

/* 假设父容器是body，也可以给父容器自定义类名如.section-container */
.section-container {
  display: flex;
  flex-direction: column-reverse;
  /* 可选：添加元素间距 */
  gap: 1rem;
}

无需修改任何元素定位，就能让.second.section显示在上方，.first.section显示在下方，完美匹配你的需求。

方法2：使用相对定位 + z-index（适用于已定位元素） #

如果你的section已经使用了position: relative（或可以设置为相对定位），可以通过调整top属性和z-index调换位置：

.first.section {
  position: relative;
  /* top值设为第二个section的高度，示例假设高度为80px */
  top: 80px;
  z-index: 1;
}

.second.section {
  position: relative;
  /* 向上移动自身高度，覆盖原第一个section的位置 */
  top: -80px;
  z-index: 2;
}

⚠️ 注意：这种方法需要明确section的固定高度，如果高度是动态的，需要配合JavaScript计算，灵活性不如Flexbox。

方法3：使用Grid布局 #

和Flexbox类似，Grid也能轻松反转元素顺序：

.section-container {
  display: grid;
}

/* 指定第二个section排在第一行，第一个排在第二行 */
.second.section {
  grid-row: 1;
}
.first.section {
  grid-row: 2;
}

最后补充：如果不需要保留原DOM顺序，直接把.second.section的代码放到.first.section前面，是最直接且性能最优的方法哦！

内容的提问来源于stack exchange，提问作者Zubair Nazer Oliyat