Question

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

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

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

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

Answer 1

简答：

仅为top设置left和div。完成后，然后在所有这些上设置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移动到第一个的位置，等等。

以下是正在发生的事情的慢动作演示：http://jsfiddle.net/thirtydot/SxJCb/7/

Answer 2

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

这可以帮助

Answer 3

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

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

3 个答案: