1

我有一些“区域”类的 div，彼此相邻浮动。我有以下 jQuery 代码：

$(".area").each(function(){
    var pos = $(this).position();
    $(this).css({"left":pos.left, "top":pos.top});
});

这很好用，但是当元素静态定位时，浏览器不会考虑顶部和左侧。如果我修改元素的位置值，则 pos.left 和 pos.top 都为零。也就是说，如果我有这个代码：

$(".area").each(function(){
    var pos = $(this).position();
    $(this).css({"left":pos.left, "top":pos.top, "position":"absolute"});
});

然后$(this).position()不断返回{left:0,top:0}。我误解了如何$.position()工作，我误解了 CSS 位置的工作原理，还是这是一个错误？有人对如何解决此问题有任何建议吗？

4

1 回答 1

1

跟进我的评论。我创建了一个jsFiddle示例来解释正在发生的事情。

当您定位第一个.area时，它会将其从流程中移除，现在您的第二个.area将占据它的位置。对于$.each(). 因此，如果您的第一个元素从位置 0,0 开始，那么当它移动到绝对位置时，下一个元素将变为 0,0。理想情况下，您需要先保存一个包含您的位置的数组，然后重新定位它们：

$(".area").each(function () {
    var pos = $(this).position();
    savedPos.push({
        left: pos.left,
        top: pos.top
    });
});
$(".area").each(function (i) {
    $(this).css({
        "position": 'absolute',
        "left": savedPos[i].left,
        "top": savedPos[i].top
    });
});

或设置左/右后设置位置：

$(".area").each(function () {
    var pos = $(this).position();
    $(this).css({
        "left":pos.left,
        "top": pos.top
    });
});
$('.area').css('position','absolute');
于 2013-05-11T16:15:36.433 回答