为什么 top: 和 left: 属性在我的 HTML 中不一致

Question

在我的 HTML 页面中，我有一堆图片框图像，我试图在货架图像上排列，我试图通过生成 top: 和 left: px 来完成此操作，以 px 表示每个图像的位置。每个 img 元素都相同，除了它的 ID 和它的 top: 和 left: 位置，但是由于一些奇怪的原因，left:60px 将是一个元素的左边到另一个元素的不同距离。提供的图像证明了这一点。

这是我的 shelf div 的 css，它们包含在其中。每个 img 元素都有相对位置

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

我期待在同一个 div 中具有相同 top:px 和 left:px 属性的元素，具有相同尺寸和属性的元素位于同一位置。但似乎其中许多元素的数值位置不一致。我尝试将位置：每个元素的类型更改为我能想到的所有内容，但似乎没有任何效果。

Answer 1

position: relative

的意思是“找出这个元素如果没有定位，它会在哪里，然后将它从那个位置移动”。

如果你有两个

<img>

元素彼此相邻而没有定位，那么浏览器将呈现它们 彼此相邻（即不在同一点上重叠）。

要使用您的方法，您应该考虑在父元素上设置

position: relative

以建立包含块，然后使用

position: absolute

在其中布置各个图像。

你最好不要使用定位并切换到 grid 代替。