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}。CSS の位​​置がどのように機能するか$.position()を誤解していますか、それともバグですか? この問題を解決する方法について何か提案はありますか?

4

1 に答える 1

1

私のコメントのフォローアップ。何が起こっているのかを説明するjsFiddleの例を作成しました。

1 番目を配置する.areaと、フローから削除され、2 番目.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 に答える