为何HTML中top与left属性的定位效果不一致？

问题描述 #

我在HTML页面中尝试将一批相框图片对齐到货架背景图上，通过JavaScript为每个<img>元素生成px单位的top和left值来定位。除ID、top和left属性外，所有img元素的属性、尺寸完全一致，但出现了相同left值（比如60px）在不同元素上左侧偏移距离不一致的问题，附图可展示该现象。

容器#theShelf的CSS代码如下：

#theShelf {
    background-image: url(sprites/shelf2.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    height: 1920px;
    width: 1080px; 
    margin: 0 auto;
}

每个img元素均设置为position: relative，我预期相同top、left数值的元素应处于同一位置，但实际定位与数值不符，尝试修改position类型也无效。

问题根源与解决办法 #

核心原因 #

position: relative的偏移是基于元素自身在文档流中的初始位置计算的。如果这些相框img在文档流里的初始位置不一样（比如换行产生的间隙、默认margin/padding影响、被其他元素挤压），哪怕设置相同的left/top，最终显示位置也会有差异——因为relative是“相对自己原来的位置挪”，不是相对容器左上角。

解决步骤 #

1. 改用容器相对+元素绝对定位（最可靠方案）
   这是固定定位元素到容器指定位置的标准用法：把容器设为position: relative作为定位参考，相框用position: absolute，此时left/top就是相对于容器左上角的距离，不受元素初始文档流位置影响，相同数值必然对齐。
   修改后的CSS：

   #theShelf {
       position: relative; /* 新增这行，作为绝对定位的参考容器 */
       background-image: url(sprites/shelf2.png);
       background-repeat: no-repeat;
       background-position: center;
       background-size: contain;
       height: 1920px;
       width: 1080px; 
       margin: 0 auto;
   }
   
   #theShelf img {
       position: absolute;
       margin: 0; /* 清除默认边距 */
       padding: 0;
       /* 确保尺寸一致，你已确认一致可保留原有设置 */
   }
   

2. 清除元素默认布局干扰
   要是不想改定位方式，必须确保所有img元素初始布局完全一致：给img加display: block（避免inline元素的行高间隙），清除默认的margin/padding，同时确保它们在文档流里处于同一初始位置（比如都在同一行、没有换行空格）。

3. 验证JS生成的数值准确性
   有时候看似是60px，实际可能生成了60.1px这类小数，或者单位缺失。可以打开浏览器控制台（F12），选中不同img元素，检查样式面板里的left/top值是否完全一致。

内容的提问来源于stack exchange，提问作者Joshua Clark