HTML无定位精度概念，偏移源于JS/CSS接口与渲染机制偏差；getBoundingClientRect()返回小数因亚像素渲染，需用devicePixelRatio校正；absolute定位需父级position:relative；fixed元素受滚动条、scroll-padding等影响，应动态补偿。
HTML 本身没有“定位精度”这回事，你遇到的偏移、抖动、差几十像素，全来自 getBoundingClientRect()、offsetTop、top/left 这些 JS/CSS 接口与浏览器渲染机制的交互偏差。
为什么 getBoundingClientRect() 返回值带小数？
它返回的是 CSS 像素坐标，但浏览器实际渲染可能落在亚像素位置（比如 100.34px），尤其在高 DPI 屏（window.devicePixelRatio > 1）下更明显。这个小数不是 bug，是浏览器为了平滑动画/缩放做的插值处理。
- 视觉上“模糊”或“发虚”？先检查是否启用了
image-rendering: pixelated或backface-visibility: hidden干扰了合成层 - 需要整像素对齐？用
Math.round(rect.left * window.devicePixelRatio) / window.devicePixelRatio校正（注意：仅适用于读取后赋值场景） - 别在
scroll事件里反复调用——它触发重排，且返回值可能滞后一帧；改用IntersectionObserver+requestAnimationFrame组合
absolute 定位总“漂”到视口左上角？
因为没设 position: relative 的父容器。position: absolute 的 top/left 永远找「最近的已定位祖先」，找不到就回退到视口。
- 检查 computed 样式里的
Containing Block是不是body或html—— 那就是漏了父级position - 哪怕父容器不需要偏移，也加一句
position: relative，这是防御性写法 - 避免多层嵌套
relative：每层都会改变参考系，top: 10px在第二层 relative 里，实际是相对于第一层 relative 的 offset，极易误判
fixed 元素定位不准，滚动时“跳一下”？
它参照的是视口左上角，但滚动条宽度、scroll-padding、iOS Safari 的强制重排逻辑，都会让真实渲染位置和 getBoundingClientRect() 返回值不一致。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- Mac 上“自动隐藏滚动条”时，
getBoundingClientRect()仍按滚动条存在计算，导致left多出几个像素 → 用document.body.offsetWidth - document.documentElement.clientWidth动态算滚动条宽度并补偿 - 顶部有 fixed 导航栏？给 body 加
scroll-padding-top: 60px（值=导航高度），否则scrollIntoView()会把目标元素顶到导航下面 - 不要用
offsetTop推算 fixed 元素位置——它返回的是文档流中的值，和 fixed 渲染位置无关
想像素级居中，为什么 translate(-50%, -50%) 有时失效？
它依赖两个前提：元素必须脱离文档流（position: absolute 或 fixed），且 top: 50% / left: 50% 已生效。百分比的参考系必须明确。
- 如果父容器没设 height，
top: 50%可能算出 0px → 改用top: 0; bottom: 0; margin: auto;（仅在 flex/grid 容器中可靠） - transform 的百分比基于自身宽高，
translate(-50%, -50%)永远居中，但前提是元素已渲染出尺寸（比如文字块需等字体加载完） - 混用
margin: auto和transform会导致行为不可预测——前者影响布局，后者只是视觉位移
真正难处理的不是“怎么写”，而是不同设备、不同缩放、不同滚动状态下的坐标系切换。别指望一次 JS 计算打遍天下，该用 IntersectionObserver 就别硬上 scroll，该用 transform 就别死磕 left/top，该设 devicePixelRatio 补偿就别只盯着 CSS 像素。这些细节不显眼，但上线后第一个被用户截图反馈的，往往就是它们。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
