Question

我有一些带有“区域”类的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的位置是什么，或者这是一个错误？有没有人对如何解决这个问题有任何建议？

Answer 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');

如果元素定位设置为绝对，则jQuery position（）返回零值

1 个答案: