如何在不修改标记的前提下将指定行内列表定位到目标列表下方？

听起来你遇到的核心问题是在不能修改HTML结构的前提下，实现跨元素的精准位置对齐——毕竟grid、flex的order或float都是基于文档流内的布局调整，没法直接跳转到其他元素的下方。下面给你两个可行的方案，分别适合静态和动态场景：

方案一：纯CSS绝对定位（适合布局固定的静态页面） #

如果你的列表容器是固定尺寸、且第一个列表的位置/高度不会动态变化，可以用「相对定位容器+绝对定位目标元素」的组合：

1. 先给所有列表的父容器设置相对定位，让绝对定位的元素以它为基准：

.list-container {
  position: relative;
}

2. 精准定位目标列表到第一个列表的正下方：

#under-first {
  position: absolute;
  /* 第一个列表的高度 + 它的底部外边距，比如第一个列表高50px，margin-bottom是10px，就写60px */
  top: 60px;
  /* 和第一个列表的左对齐，比如第一个列表的左边距是20px，就写20px */
  left: 20px;
  /* 去掉目标列表原来的margin，避免偏移 */
  margin: 0;
}

⚠️ 注意：这个方案的缺点是数值是硬编码的，如果第一个列表的内容动态变化（比如文字换行、图片加载），定位就会失效。

方案二：JavaScript动态计算定位（适合动态内容/响应式页面） #

如果页面是动态的，纯CSS没法自适应，用JS获取元素的实时位置和尺寸来调整是更可靠的方法：

// 获取第一个列表和目标列表的DOM元素
const firstList = document.querySelector('.list:first-of-type');
const targetList = document.getElementById('under-first');

// 定义定位函数
function positionTargetList() {
  // 获取第一个列表的实时位置信息（相对于视口）
  const firstRect = firstList.getBoundingClientRect();
  // 获取页面滚动偏移量，避免滚动时定位偏移
  const scrollY = window.scrollY;
  const scrollX = window.scrollX;

  // 设置目标列表的绝对定位样式
  targetList.style.position = 'absolute';
  // 定位到第一个列表的底部
  targetList.style.top = `${firstRect.bottom + scrollY}px`;
  // 和第一个列表左对齐
  targetList.style.left = `${firstRect.left + scrollX}px`;
  // 保留目标列表原来的空间，防止页面布局错乱
  targetList.style.visibility = 'hidden';
  
  // 克隆一个可见的目标列表放到定位位置（避免原元素脱离文档流导致布局塌陷）
  const clonedTarget = targetList.cloneNode(true);
  clonedTarget.style.visibility = 'visible';
  clonedTarget.style.position = 'absolute';
  clonedTarget.style.top = `${firstRect.bottom + scrollY}px`;
  clonedTarget.style.left = `${firstRect.left + scrollX}px`;
  document.body.appendChild(clonedTarget);
}

// 页面加载完成后执行定位
window.addEventListener('load', positionTargetList);
// 窗口大小变化时重新定位（适配响应式）
window.addEventListener('resize', positionTargetList);

这个方案会实时获取第一个列表的位置，不管内容怎么变化都能精准对齐，而且通过克隆元素的方式避免了原元素脱离文档流导致的布局错乱。

额外提示：如果父容器是Grid布局的优化 #

你之前试过grid-row没成功，可能是没正确规划网格行。如果父容器可以设置为Grid，你可以强制让第一个列表和目标列表占用同一列，把其他列表挤到后面的行：

.list-container {
  display: grid;
  grid-template-columns: 1fr; /* 单列布局 */
  grid-auto-flow: row;
}

/* 第一个列表占第1行 */
.list:first-of-type {
  grid-row: 1;
}

/* 目标列表占第2行 */
#under-first {
  grid-row: 2;
  margin: 0;
}

/* 其他所有列表从第3行开始排列 */
.list:not(:first-of-type):not(#under-first) {
  grid-row: 3;
  grid-row-end: span 1; /* 每个列表占一行 */
}

这个方法不需要绝对定位，但前提是父容器可以设置为Grid，而且其他列表的顺序不影响功能。

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