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>