Html 如何绝对定位一组元素？

我使用绝对定位设置了4个圆桶，使其完全对齐。我的理解是，这基本上是使用top，left设置每个块的x，y位置，父元素是原点。一切都如我所料，我惊叹于美好的事物是如何运作的。然后我点击IE 9中的缩放按钮，虽然y坐标保持不变，但x坐标向左移动。有些甚至超过了父元素。这就更没有意义了。b.c.我没有指定任何负值。为什么缩放会影响绝对定位？

缩放会更改这些元素的大小，但不会更改其位置。但我不知道如何防止这种情况发生，我想你不能做任何事情来阻止它，因为这是由浏览器引起的

---

唯一的可能是用JavaScript检查大小，也许可以用JS识别，但这将非常困难。无论如何，它在缩放时起作用很重要吗？

如果表是正确的，不要避开它们-用表从左到右、从上到下对齐4个块是最容易的，imho。您可以将div与左右浮动以及类似的垃圾一起使用，但表中的单元格永远不会偏离对齐方向。

您的绝对定位元素当前相对于

标记的上/左位置（始终为0px/0px）进行定位

但您有一个中心对齐的布局，左边距

为：auto；右边距：自动并且您希望绝对定位的元素与此完美对齐

假设您使用缩放使页面缩小50%。这将使
left
position属性减少50%，并减少
边距：auto的
宽度
元素50%（触发左/右边距增加，无论宽度变化是什么！）

因此，缩小页面会使居中元素上的边距变大，但会使绝对位置坐标变小

要使其完美对齐，需要使用
左边距：auto使绝对定位的元素相对于元素对齐

在您的具体示例中，我会这样做：

div#Ab1
{
  position: relative;
}

div#Ab1_2
{
  position: absolute;
  top: 80px;
  right: 0px; /* note: setting a right position, not a left position */
}

/* and do the same for div#Ab1_4 and div#Ab1_4_under */

div.block { height: 200px; width: 400px; float: left; }

这有意义吗

PS：它在本地工作，然后在您上载时被破坏的原因是，您可能没有在其中一个块上以默认的缩放级别查看页面。
如果您的4个块在高度和宽度上相同，您可以执行以下操作：

div#Ab1
{
  position: relative;
}

div#Ab1_2
{
  position: absolute;
  top: 80px;
  right: 0px; /* note: setting a right position, not a left position */
}

/* and do the same for div#Ab1_4 and div#Ab1_4_under */

div.block { height: 200px; width: 400px; float: left; }

然后将它们放入一个只允许并排放置两块的容器中

小提琴示例：
有很多方法可以做到这一点……但我最终做的，以及对我来说最重要的是设置x-y坐标平面，并使用边距或顶部和左侧属性定位元素。为此，我将父div设置为相对定位，使其注册为“原点”，然后将我的四个方形div设置为绝对定位。这很有效。通过我，您必须将绝对定位元素的父div设置为非静态定位。
造成问题的不仅仅是缩放。调整浏览器窗口的大小也有一些有趣的结果。原则上我同意你的观点，但在这种情况下，我认为没有必要设置一个表。另外，我在
display:inlineblock而不是
浮动：左