如何在WordPress网站用CSS下移div，将相关文章模块放到回答模块下方

为什么你之前用relative定位不生效 #

relative定位是相对元素自身原位置产生偏移，仅设置position: relative不写top/bottom等偏移值不会产生位移效果。就算补充了偏移值，元素原来的占位空白也会保留，还很容易出现和其他模块重叠的问题，完全不适合用来调整模块的上下排列顺序。

推荐实现方案（最稳定，无布局副作用） #

前置准备 #

首先获取两个模块和共同父容器的选择器：打开站点前台对应页面，按F12唤出开发者工具，点击左上角元素选择按钮，分别点击「回答模块」、「相关文章模块」以及它们的共同外层父容器，复制对应元素的类名或ID，替换下文代码中的占位选择器即可。

代码实现（Flex布局调整顺序） #

如果两个模块属于同一个父容器，用Flex调整顺序是最优解，完全适配响应式，不会出现布局错乱：

/* 给两个模块的共同父容器开启垂直flex布局 */
.共同父容器的实际选择器 {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 可自定义两个模块之间的间距，单位可换rem/em */
}

/* 回答模块排序靠前 */
.answer模块的实际选择器 {
  order: 1;
}

/* 相关文章模块排序靠后 */
.related-posts模块的实际选择器 {
  order: 2;
}

特殊情况处理 #

如果两个模块不在同一个父容器下，无法用Flex调整，可以用以下代码临时实现：

.related-posts模块的实际选择器 {
  position: relative;
  top: 你需要下移的距离，比如100px;
  /* 注意：该方法仅临时适配，响应式下可能错位，建议优先找主题开发者调整模板输出顺序 */
}

生效方法 #

把修改好的CSS代码粘贴到WordPress后台「外观」→「自定义」→「额外CSS」输入框中，点击「发布」后刷新前台页面即可生效。如果代码不生效，可以在每个CSS属性末尾加!important提高权重，比如order: 2 !important;。

效果参考 #

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