Question

我使用绝对定位在完美对齐中设置了4个块。我的理解是，这是你基本上使用top，left设置每个块的x，y位置，而父元素是原点。一切都按照我的预期进行，我惊叹于一切顺利。比我在IE 9中点击缩放按钮，虽然y坐标保持在那里状态...... x cooridanates向左移动..有些甚至超过了父元素...这使得b.c.我没有指定任何负值。为什么缩放会影响绝对定位？

Answer 1

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

唯一的可能性是使用JavaScript检查大小，也许可以用JS识别它，但这将非常困难。无论如何，它在缩放时是否有效？

Answer 2

您的绝对定位元素目前相对于<body>标记的上/左位置（始终为0px / 0px）定位。

但是你有一个中心对齐的布局，margin-left: auto; margin-right: auto;，你希望绝对定位的元素完美排列。

假设您使用缩放使页面缩小了50％。这会将left位置属性减少50％，并将width元素的margin:auto;减少50％（触发左/右边距增加无论宽度变化如何！）。

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

为了使其完美排列，您需要使用margin-left: 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 */

这有意义吗？

PS：它在本地工作的原因然后在您上传时被破坏了，您可能没有在其中一个上以默认缩放级别查看该页面。

Answer 3

如果你的4个方块的高度和宽度相同，你可以这样做：

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

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

示例小提琴： http://jsfiddle.net/u5xVa/

Answer 4

有很多方法可以做到这一点......但是我最终做的事情以及对我来说最重要的是设置一个x-y坐标平面并使用边距或顶部和左边属性定位元素。为此，我将父div设置为相对定位，使其注册为＆＃34; origin＆＃34;然后将我的四个方格div设置为绝对定位。这很好用。通过我的是，你必须将你的绝对定位元素的父div设置为非静态定位。

Answer 5

如果它们是正确的方法，请不要避开表格 - 从左到右，从上到下对齐4个块，最简单的方法是使用表格，imho。您可以使用div左右浮动和垃圾，但表格中的单元格永远不会偏离对齐。

如何绝对定位一组元素？

5 个答案: