将位置设置为绝对后，元素位置发生变化

Question

我遇到了一个非常奇怪的问题，我已经设法修复，但是采用了令人厌恶的方式。

我有以下工作代码抓取元素的左侧和顶部（使用MooTools）。然后它使用setStyles将这些测量的坐标复制到样式属性中。这工作得很好。

但是，只要将位置设置为绝对值，上面的代码中的值就会改变。

作品，但可怕的：

var Sortable = new Class({ 
    initialize: function(element, container) { 
     // Store the element and its settings 
     this.element = element; 
     this.size = element.getSize(); 
     this.position = element.getPosition(container); 

     // Set the position 
     element.setStyles({ 
      left: this.position.x, 
      top: this.position.y 
     }); 

     setTimeout(this.goAbsolute.bind(this), 0); 
    }, 
    goAbsolute: function() { 
     this.element.setStyle('position', 'absolute'); 
    } 
}); 

正如你所看到的，我使用的是超时分离左/顶部设置和位置设置。以下代码不起作用。

var Sortable = new Class({ 
    initialize: function(element, container) { 
     // Store the element and its settings 
     this.element = element; 
     this.size = element.getSize(); 
     this.position = element.getPosition(container); 

     // Set the position 
     element.setStyles({ 
      left: this.position.x, 
      top: this.position.y, 
      position: 'absolute' 
     }); 
    } 
}); 

所以，我们可以使用这个。

this.size = element.getSize(); 

而size.x将例如等于100。然后用这个添加的行。

this.size = element.getSize(); 
element.setStyle('position', 'absolute'); 

size.x现在将等于0.即使它被设置为绝对之后。

我试过克隆对象及其值。

我已经尝试把它们都放在对方的范围之外。

似乎没有任何工作。

有谁知道一种方法来做类似的修复，但没有setTimeout？或者是最好的方法。

我试图尽我所能解释我的问题，但它有点奇怪。所以，请回答任何问题。

谢谢你的任何建议，你可能有。

Answer 1

我相当确定（我不确定，因为你没有提及float: left），你遇到的问题与this question中的问题相同，我彻底回答了。

总之，您需要首先在所有元素上设置top和left。完成后，在所有元素上设置position: absolute。