relative定位本身不会导致文字模糊，模糊主因是其与transform组合、父容器BFC异常或缩放等连带影响；真正需排查的是transform/will-change声明、字体平滑设置及BFC干扰。
relative 定位本身不会导致文字模糊或锯齿。如果你观察到使用 position: relative 后文字变糊，真正的问题几乎一定出在它和 transform 的组合、父容器 BFC 状态异常，或被其他样式（如缩放、字体渲染降级）连带影响。
为什么加了 top/bottom 就模糊？其实是 transform 悄悄混进来了
很多开发者以为只是写了 top: 2px，但实际项目中常伴随以下“隐形依赖”：
- 框架或 UI 库自动给 relative 元素加了
transform: translateZ(0)（为动画做准备），一触发合成层，亚像素问题立刻浮现 - 父容器用了
transform: scale(0.9)或zoom，子元素的top: 1px实际被缩放成0.9px，浏览器必须插值渲染 - CSS-in-JS 工具（如 Emotion）在 dev 模式下注入调试用的
will-change: transform，未清理就上线
验证方法：在 DevTools 的 Layers 面板里看该元素是否标有 “Composited”。没标，说明根本没进 GPU 渲染——那模糊就不是 relative 的锅，而是字体渲染配置或系统级抗锯齿问题。
relative + top 在 Retina 屏上偏移失真
Retina 屏（DPR > 1）下，top: 1px 是逻辑像素，对应多个物理像素。若父容器尺寸本身含小数（比如 width: calc(100vw - 1px)），再叠加 top 偏移，最终渲染坐标极易落在亚像素位置。
立即学习“前端免费学习笔记（深入）”；
- 不要靠
top: -1px对齐下划线或图标基线——改用vertical-align: middle或 flex 容器的align-items: center - 如果必须用
top微调，搭配font-size调整：例如把font-size: 13px改为font-size: 14px，有时能避开 DPR=2 下的 0.5 物理像素偏移 - 避免在
@media (min-resolution: 2dppx)内单独写top: 0.5px——这等于明示浏览器：“请务必插值”
真正该检查的三个地方
别盯着 position: relative 看，直接查这三项：
- 该元素或任意祖先是否声明了
transform、will-change、filter或opacity（任一都会创建新层，干扰主文档流文字渲染） - 是否设置了
-webkit-font-smoothing: antialiased—— 这会让 macOS/Chrome 文字变细发虚，尤其在小字号时；换成subpixel-antialiased可能立竿见影 - 父容器是否意外触发了 BFC（如
overflow: hidden），导致 relative 元素的偏移参考系错乱，视觉上像“浮动模糊”，实则是重叠或裁剪造成的错觉
最常被忽略的是：模糊只在特定字号（如 13px、15px）出现，换到 14px 或 16px 就消失——这不是 bug，是字体 hinting 在不同尺寸下的渲染策略切换。这时候调 top 没用，该换字号或加 text-rendering: optimizeLegibility。
