position: absolute 是隐藏并精确定位图像的最直接方案，需父容器设 position: relative；可用 top/left 负值隐藏、right/bottom 避免宽度误差；clip-path 比 overflow 更精准裁剪；Object-fit/object-position 控制图像内容显示区域；getboundingclientrect() 验证真实渲染位置。
用 position: absolute 配合 top/left 做像素级控制
图像在容器内隐藏又需精确定位时，position: absolute 是最直接有效的方案。它让图像脱离文档流，完全由父容器（必须设 position: relative）作为定位参考系。
常见错误是父容器没加 position: relative，导致图像相对 定位，一动就偏移。
- 父容器必须显式设置
position: relative（哪怕没其他样式） -
top和left支持负值，可把图像完全“藏”在可视区外，比如top: -100px - 若需右下角微调，优先用
right和bottom，避免因父容器宽度变化引发计算误差 - 慎用
transform: translate()做最终微调——它不改变布局位置，对getBoundingClientRect()等测量逻辑有影响
用 clip-path 隐藏局部但保留定位锚点
当图像本身不能移出容器、但只需显示其中一小块（比如做遮罩动画或热区切片），clip-path 比 overflow: hidden 更精准，且不影响 top/left 的原始定位基准。
典型错误是写成 clip-path: inset(50% 50% 50% 50%) 后发现图像“不见了”，其实是裁剪区域为 0，得检查单位和顺序。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
inset(top right bottom left)写法，数值单位支持px、%、vh，例如inset(24px 0 0 32px) - 配合
box-sizing: border-box可避免 padding 干扰裁剪起始点 - IE 不支持
clip-path，如需兼容，降级方案是用overflow: hidden+margin模拟裁剪效果
object-fit 和 object-position 控制图片内容而非容器
当图像尺寸与容器不匹配，又想精确控制图像哪一部分显示在容器中心（比如头像裁切、背景图焦点锁定），object-fit 和 object-position 是原生解法，不依赖定位或裁剪。
容易忽略的是：object-position 默认值是 50% 50%（居中），但一旦设了 object-fit: cover，这个百分比就变成对“缩放后图像内容”的坐标，不是原始图尺寸。
-
object-fit: cover+object-position: 20% 30%表示：显示缩放后图像的 (20%, 30%) 处对齐容器左上角 - 数值支持像素值（如
20px 16px），此时以图像原始尺寸为基准，适合固定比例素材 - 调试时可在 DevTools 中实时拖动
object-position的百分比滑块，比反复改 CSS 快得多
用 getBoundingClientRect() 验证真实渲染位置
无论怎么写 CSS，最终是否“精准”，得看浏览器实际渲染结果。靠肉眼或估算不行，尤其涉及缩放、transform、subpixel 渲染时。
常见误判是以为 top: 12.5px 就一定停在 12.5 像素处——实际上 chrome 可能四舍五入到 13px 渲染，而 getBoundingClientRect() 返回的是真实像素值。
- 在控制台执行
document.querySelector('img').getBoundingClientRect()，查看left、top字段 - 若需动态对齐（比如 tooltip 跟随图像某点），务必用该 API 获取实时位置，而不是读取
style.top - 注意：该方法返回的是相对于视口的坐标，如需相对于父容器，要手动减去父容器的
getBoundingClientRect()
实际项目里，“隐藏+精确定位”往往不是单点问题，而是多个层叠效果叠加的结果——比如先 absolute 定位，再 clip-path 裁剪，最后用 transform: scale(0.98) 微调清晰度。这时候任何一个属性的优先级或生效时机没理清，都会让像素差放大成明显错位。