单纯用 position: absolute 做拖拽排序会“飘走”，因幽灵图默认脱离文档流且以最近已定位祖先为基准，父容器未设 position: relative 时回溯至 body；应给父容器设 position: relative，子项保持 static，用 transform 替代 top 实现位移。
为什么单纯用 position: absolute 做拖拽排序会“飘走”
因为浏览器拖拽时生成的“幽灵图”（ghost image）默认脱离文档流，且 dragstart 事件中若没调用 event.dataTransfer.setDragImage()，它就按原 DOM 位置渲染——而一旦你给列表项加了 position: absolute，它的定位基准就变成最近的已定位祖先。如果父容器没设 position: relative，幽灵图就会回溯到 ，看起来像从页面左上角突然弹出，完全脱离列表上下文。
如何用 position: relative 锚定拖拽视觉锚点
关键不是让列表项自己绝对定位，而是让它们的**父容器**成为可靠的定位上下文。这样即使你用 CSS 模拟插入占位、做高度过渡动画，所有视觉变化都稳稳落在列表内部。
- 给包裹列表的容器（如
<ul class="sortable"></ul>或<div class="list-container">）显式加 <code>position: relative - 所有可拖拽项（
<li>或<div class="item">）保持 <code>position: static（默认），靠margin/transform做位移反馈 - 拖动时添加的占位符（placeholder）必须是同级元素，且也受该
relative容器约束，否则动画会错位 - 拖动开始时，给当前项加
transform: translateY(-5px)+opacity: 0.7，制造“浮起”感 - 占位符用
height: 0→height: 44px+transition: height 0.2s ease，但前提是它的父容器有overflow: visible（别误加hidden） - 避免在拖动项上同时写
top和transform，CSS 层叠会覆盖，行为不可控 - 第一层：看板容器
.board { position: relative; } - 第二层：分组容器
.group { position: relative; } - 第三层：实际列表容器
.item-list { position: relative; } - 切忌只在最外层设一次
relative就以为万事大吉
transform: translateY() 比 top 更安全的位移方式
用 top + position: relative 移动列表项，容易触发重排（reflow），影响性能；而 transform 只触发重绘（repaint），更顺滑，且不破坏文档流布局。
嵌套列表拖拽时，relative 必须“逐层显式声明”
如果排序区域本身是子菜单（比如看板里的分组列表），而这个分组又嵌在另一个可展开的面板里，那每一层可折叠/可拖拽的容器都得独立设 position: relative。漏掉任何一层，幽灵图或占位符就可能向上逃逸到外层容器甚至视口边缘。
最容易被忽略的是：拖拽过程中临时插入的占位符元素，如果动态 append 到 DOM 时没确认父节点是否已具备 relative 上下文，动画就会失焦——它不飘走，但会“卡在半空”，高度撑不开。
