data-*属性不能自动记录实时位置，需用javascript在dom加载、滚动、拖拽等时机主动读取getboundingclientrect()或offsettop/left并写入dataset，且要注意坐标系差异、类型转换和更新时机。
data-* 不能直接记录实时位置，只能存初始值或手动更新
HTML data- 属性本身是静态的，浏览器不会自动把元素坐标写进去。你想“记录位置”，实际要做的是：在某个时机（比如 DOM 加载完、滚动后、拖拽中）用 JavaScript 主动读取 getBoundingClientRect() 或 offsetTop/Left，再写进 dataset。否则 data-top="100" 这种写死的值，页面一滚动就失效了。
常见错误现象：
- 写死
data-x="240" data-y="310"，结果元素被 CSS 定位或 Flex 布局推移，数值完全对不上 - 用
dataset.top = el.offsetTop，但没考虑父级position: relative是否存在，导致基准偏移 - 在
DOMContentLoaded里读位置，但图片/字体还没加载完，布局重排后坐标变了
用 dataset 存位置时命名和类型要统一
位置信息建议用 data-left、data-top、data-width、data-height 这类直白命名，避免 data-pos 或 data-coord 这种模糊字段——后续 JS 处理起来得反复 parse，容易出错。
注意：dataset 只存字符串，所以即使你写 el.dataset.left = 240，读出来也是 "240"。需要数值运算时必须显式转：
const left = parseFloat(el.dataset.left) || 0;
如果要存相对视口的位置（比如用于 tooltip 定位），推荐用 data-rect-top、data-rect-right 等前缀区分，避免和绝对定位属性混淆。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
动态更新 data-position 的典型场景和写法
真正有用的“记录位置”，往往发生在交互过程中。比如拖拽排序、地图标记、弹窗锚点对齐。这时不能只写一次，得监听变化并同步更新。
- 滚动中持续更新：用
requestAnimationFrame节流，避免频繁重排 - 拖拽时实时写入：在
dragmove事件里调用el.dataset.x = Math.round(x) - Resize 后重算：监听
window.resize，对目标元素重新调用getBoundingClientRect() - 避免重复写入：更新前先比对
Math.abs(parseFloat(el.dataset.left) - rect.left) > 1，减少无意义 DOM 属性变更
示例（防抖更新）：
let pendingRectUpdate;<br>function updateRectData(el) {<br> const rect = el.getBoundingClientRect();<br> clearTimeout(pendingRectUpdate);<br> pendingRectUpdate = setTimeout(() => {<br> el.dataset.left = Math.round(rect.left);<br> el.dataset.top = Math.round(rect.top);<br> }, 16);<br>}
别把 data-* 当成坐标系统，它只是个记事本
data- 属性不参与渲染、不触发重排、也不影响层叠上下文。它只是个“贴在 DOM 上的便利贴”。如果你依赖它做定位计算，必须确认三点：
- 写入时机是否覆盖了所有可能的布局变化（比如字体加载、图片加载、CSS 动画结束）
- 读取时是否做了容错（
dataset.left为空或 NaN 怎么 fallback） - 是否混淆了 client、offset、scroll、page 四套坐标系——
getBoundingClientRect()返回的是视口坐标，offsetTop是相对于最近有定位祖先的偏移，二者混用必出错
最常被忽略的一点：用 dataset 存位置后，没意识到它不会随 CSS transform 自动更新。一个 transform: translateX(50px) 的元素，getBoundingClientRect().left 已变，但 dataset.left 还是旧值——这时候必须手动触发更新逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
