加了 cursor: move 弹窗仍不动，因为该属性仅改变鼠标样式，不触发位置计算；真正实现拖拽需 JavaScript 监听 mousedown/mousemove 并动态设置 style.left/style.top。
可拖拽弹窗的初始定位必须用 position: absolute 配合显式 top/left，仅靠 cursor: move 不会改变位置，它只改鼠标样式。
为什么加了 cursor: move 弹窗还是不动？
这是最常被误解的一点：cursor: move 只是让鼠标变成拖拽手势，它不触发任何位置计算或 DOM 更新。真正移动弹窗的是 JavaScript 里对 mousedown/mousemove 的监听和 style.left/style.top 的赋值。CSS 本身没有“拖拽逻辑”，只有“呈现逻辑”。
-
cursor: move应该加在弹窗标题栏（如.modal-header）上，而不是整个弹窗容器，避免误触内容区 - 若弹窗用了
position: fixed，top/left值是相对于视口；若用position: absolute，必须确保其父容器有position: relative或fixed，否则定位基准不可控 - 不要给弹窗本身设
transform: translate()后再拖拽——它会和 JS 设置的top/left叠加，导致坐标错乱
position: absolute 弹窗首次加载就偏移或闪动？
根本原因是定位上下文缺失：当弹窗的父容器没设 position: relative，absolute 元素会向上找，最终可能以 body 为基准——而 body 默认有 margin: 8px（Chrome）或滚动条宽度干扰，造成视觉跳变。
- 给弹窗直接父容器加
position: relative，且明确设宽高（如width: 100vw; height: 100vh;），切断向上查找链 - 重置全局边距：
* { margin: 0; padding: 0; }，尤其防html/body的默认值 - 初始
top/left必须显式写死，比如top: 100px; left: 200px;，别依赖auto或未声明值，否则 JS 第一次读getComputedStyle(el).top可能返回auto，导致拖拽起点错误
如何让拖拽后的位置刷新页面也不丢失？
很多实现把拖拽结束时的 top/left 直接写进 style，但刷新后 JS 重新初始化又从 CSS 默认值读起，覆盖了上次位置——本质是初始状态和运行时状态混在一起了。
立即学习“前端免费学习笔记（深入）”；
- 用
data-init-top和data-init-left存原始坐标，例如：<div class="modal" data-init-top="150" data-init-left="300"> - JS 初始化时优先读
el.dataset.initTop，而非getComputedStyle(el).top - 拖拽结束只更新
el.style.top/el.style.left，绝不修改dataset——这样硬刷新仍按原始坐标启动 - 如果需持久化，再额外存到
localStorage，但那是另一层逻辑，和 CSS 定位解耦
真正难的不是拖动本身，而是让初始定位、拖拽坐标、刷新恢复三者在不同生命周期里互不污染。只要 position 上下文稳定、top/left 来源清晰、dataset 和 style 职责分明，问题就收敛在可控范围内。
