web-dev-qa-db-ja.com

jQueryではは、ドキュメントではなく、親に対して相対的な位置の値を使用して、要素の "top、left"プロパティをのように設定できますか？

.offset([coordinates])メソッドは、要素の座標を設定しますが、それはドキュメントを基準にしています。それではどうやって要素の座標を親に対して相対的に設定することができますか？

私は.position()メソッドが親に対して相対的に「上、左」の値しか得られないことを発見しました、しかしそれは値を設定しません。

私が試した

$("#mydiv").css({top: 200, left: 200});

しかし動作しません。

jquerycssjquery-selectorspositioningcss-position
131
Max

親からの相対位置を設定するには、parentのposition:relativeとelementのposition:absoluteを設定する必要があります。

$("#mydiv").parent().css({position: 'relative'});
$("#mydiv").css({top: 200, left: 200, position:'absolute'});

これは、position: absolute;が最も近い配置された親（つまり、デフォルトのstatic以外のpositionプロパティを持つ最も近い親）に対して相対的に配置されるためです。

211
Champ
$("#mydiv").css('top', 200);

$("#mydiv").css('left', 200);
34
MMALSELEK

JQuery UI 。position メソッドを試すことができます。

$("#mydiv").position({
  of: $('#mydiv').parent(),
  my: 'left+200 top+200',
  at: 'left top'
});

実用的なデモをチェックしてください。

13
xdazz

動的ページの動的コードオフセット

var pos=$('#send').offset().top;
$('#loading').offset({ top : pos-220});
5
behzad

渡された値が文字列型の場合は、 'px'（90px）を続ける必要があります。値が整数の場合は、自動的にpxが追加されます。 widthプロパティとheightプロパティはより寛容です（どちらのタイプでも動作します）。

var x = "90";
var y = "120"
$(selector).css( { left: x, top: y } )        //doesn't work
$(selector).css( { left: x + "px", top: y + "px" } )        //does work

x = 90;
y = 120;
$(selector).css( { left: x, top: y } )        //does work
5
Derek Wade

jQueryのoffset()関数を使用します。ここにあります：

$container.offset({
        'left': 100,
        'top': mouse.y - ( event_state.mouse_y - event_state.container_top ) 
    });
0
Sreekanth S

設定位置で私の記憶をリフレッシュして、私は他の誰かがそれを見るかどうかわからないので遅くなってきました、しかし -

私はcss()を使って位置を設定するのは好きではありませんが、それでも大丈夫です。私は最善の策はxdazzで述べられているようにjQuery UIのposition()セッターを使うことだと思います。しかし、jQueryのUIが何らかの理由でオプションではない（まだjQueryが選択されている）場合は、次のようにします。

const leftOffset = 200;
const topOffset = 200;
let $div = $("#mydiv");
let baseOffset = $div.offsetParent().offset();
$div.offset({
  left: baseOffset.left + leftOffset,
  top: baseOffset.top + topOffset
});

これには、$divの親を相対的な位置に任意に設定しないという利点があります（$divの親が、それ自体、絶対的に他の場所に配置されている場合はどうなりますか？）。私は、$divがoffsetParentを持っていない場合、それがdocument、null、またはその他のもの全体を返すかどうかわからない場合が唯一の主要なEdgeのケースだと思います。

offsetParentは、2008年のいつかのjQuery 1.2.6から利用可能になったので、このテクニックは現在そして最初の質問がされたときにうまくいきます。

0
knickum