绝对定位需父容器设position: relative；避免百分比top/left，优先用px或vh；object-fit与background-image定位逻辑不同；禁用缩放或用visualViewport校正；Flex/Grid中注意基线对齐。
用 position: absolute 时，父容器必须是 position: relative
很多开发者直接给 position: absolute，却发现 Chrome 里位置对了，iOS Safari 或 Android WebView 里偏移明显。根本原因是：绝对定位的参照物是最近的「已定位祖先元素」，如果没显式设置，就退到 body 或 html，而不同浏览器对 body 的默认 margin、scrollbar 行为、viewport 缩放处理不一致。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
position: relative- 避免用
top/left配合百分比值（如top: 20%），因为各平台对「父容器高度是否包含滚动条、是否受 zoom 影响」解释不同- 优先用固定像素值（
top: 48px）或视口单位（top: 5vh），但注意 iOS Safari 对vh在地址栏收起/展开时会重算，可加min-height: 100vh缓解object-fit和background-image的定位行为差异图像内容本身的位置（比如裁剪后哪部分可见）和容器占位框的位置是两回事。用
object-fit控制内容对齐，和用 CSSbackground-image+background-position，底层定位逻辑完全不同，跨平台表现也不同。实操建议：
立即学习“前端免费学习笔记（深入）”；
-
object-fit: cover+object-position: center top是标准方案，iOS 13+、Android Chrome 75+ 均支持，但老版 UC 浏览器不支持object-position - 若需兼容性更强，改用
background-image，但必须配合background-size: cover和明确的background-position: 50% 0（不能写top center，Safari 旧版本解析有歧义） - 切忌混用：比如给
object-fit和background-position，后者无效且干扰调试
移动端 viewport 缩放导致像素偏移
用户双指缩放页面后，
getBoundingClientRect()返回的top/left值在 iOS 上仍基于原始视口，Android 则可能返回缩放后坐标，造成 JS 动态计算位置时错位。实操建议：
立即学习“前端免费学习笔记（深入）”；
- 禁止用户缩放：
（注意：影响可访问性，仅限强定位需求场景） - 若需保留缩放，用
visualViewportAPI 获取实时缩放比例：visualViewport.scale，再校正坐标（但 Android Chrome 61–79 不支持该 API） - 更稳妥的做法是：所有定位逻辑基于 CSS，避免用 JS 读取/设置
top/left—— 尤其是动画或拖拽场景
Flex/Grid 容器中图像位置漂移的常见诱因
用
display: flex或grid布局图像时，看似居中了，但在某些 Android 系统 WebView 中图像突然右偏 1px 或下移半行，多因基线对齐（align-items: baseline默认值）或图片作为内联元素的默认vertical-align: baseline引起。实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给图像加
vertical-align: top或vertical-align: middle，消除基线对齐干扰 - Flex 容器设
align-items: stretch（默认）时，图像高度未设会导致拉伸；明确设height或align-self: flex-start - Grid 布局中慎用
justify-items: center+align-items: center同时作用于图像，某些旧版 Samsung Internet 会忽略align-items
- 避免用
