绝对定位浮动元素时的奇怪行为

我正在尝试使用此代码绝对定位一些浮动的div：

$(function() { $('#wrapper div').each( function( index, item ) { alert( $(this).position().left ); $(this).css({position:'absolute', top:$(this).position().top, left:$(this).position().left}); }); }); 

我无法弄清楚为什么当我设置位置时：绝对$（this）.position（）总是返回{top：0，left：0}。 如何获得正确的坐标并将位置设置为绝对？

我已经设置了一个jsfiddle来说明这个http://jsfiddle.net/SxJCb/4/

Answer 1

简短回答：

为所有div设置只有top和left 。 一旦完成， 然后在所有这些上设置position: absolute 。

请参阅： http ： //jsfiddle.net/thirtydot/SxJCb/6/

 $('#wrapper div').each( function( index, item ) { $(this).css({top:$(this).position().top, left:$(this).position().left}); }).css({position:'absolute'}); 

---

答案很长:( 对正在发生的事情的解释）

所有的div都浮起来了。 正如你所拥有的那样，每个div通过设置为position: absolute来从正常流中移除，所以后面的所有div移回了一个位置。 所以，第二个div移动到第一个div位置，等等。

这是一个慢动作的演示： http ： //jsfiddle.net/thirtydot/SxJCb/7/

Answer 2

 var x = $("#wrapper div").offset().left; var y = $("#wrapper div").offset().top; 

这可以帮助

Answer 3

在直接设置css值时，您可能需要将’px’附加到顶部和左侧属性的末尾。