javascript - 为什么当我使用 Javascript 绝对定位某物时，它的 "left"和 "top"属性总是变为 0px？

Question

我正在尝试采用静态或相对定位的元素，并在不改变它们在屏幕上的物理位置的情况下将它们相对于它们的父容器绝对定位。

这是我的方法:

function changePosition(element){
  var instance = {};
  instance.element = element;
  instance.parent = instance.element.parentElement;
  instance.dim = instance.element.getBoundingClientRect();
  instance.parent.dim = instance.parent.getBoundingClientRect();
  instance.element.style.left = instance.dim.left - instance.parent.dim.left + "px";
  instance.element.style.top = instance.dim.top - instance.parent.dim.top + "px";
  instance.element.style.position = "absolute";
}
changePosition(document.getElementById("thing1"));
changePosition(document.getElementById("thing2"));

HTML:

<div>
  <input id="thing1" />
  <input id="thing2" />
</div>

在 JSFiddle 上:http://jsfiddle.net/oumt0nkv/2/

如果没有 position = "absolute"，它会按预期计算并应用 left 和 top。但是，当我在 left 和 top 中添加该行时，都设置为 0px。

如果我明确使用 100px 而不是 left 和 top 值的变量，它会按预期工作。

我不知道为什么会这样。如果 position = "absolute" 行在设置 left 和 top 的行之前，我可能会理解。这样，这些代码行中的一些似乎是异步发生的？

这在 Chrome 和 Firefox 中都会发生。谢谢!

Answer 1

如果 #thing1 是静态定位的，它将出现在左上角。

如果 #thing2 也是静态定位的，它将被 #thing1 推到右边或下一行。

如果 #thing1 是绝对定位的，并且框偏移属性设置为 auto，它将出现在它的静态位置，即如果它不是'绝对定位。即，在左上角。

但由于它是绝对定位的，所以它脱离了流。所以对后来的 sibling 没有影响。因此，#thing2 也将出现在左上角，因为它不会被 #thing1 推送。

您可以做的是向后迭代。这样，当您获得边界矩形时，之前的兄弟元素还不会绝对定位，因此它们将插入当前元素。

function changePosition(element){
  var dim = element.getBoundingClientRect(),
      pdim = element.parentElement.getBoundingClientRect();
  element.style.left = dim.left - pdim.left + "px";
  element.style.top = dim.top - pdim.top + "px";
  element.style.position = "absolute";
}
changePosition(document.getElementById("thing2")); // First 2
changePosition(document.getElementById("thing1")); // Then 1

<div>
  <input id="thing1" />
  <input id="thing2" />
</div>