HOME > リファレンス > jQuery > jQuery API一覧 > jQuery CSS > .position()

.position()

戻り値

Object: top、leftプロパティをもつオブジェクト。

.offset()がDocumentからの位置なのに対しposition()はpositionがstatic以外の親要素からの位置を返す。

サンプル

実行結果

Test

Javascript

$('.jqTest .inner').css({
display: 'inline-block',
position: 'relative',
padding: 25,
backgroundColor: '#CCCCCC'
}).find('.inner2').css({
border: '25px solid #555555'
}).find('p').css({
display: 'block',
width: 100,
height: 100,
margin: 0,
backgroundColor: '#FFFFFF'
});
$('.jqTest .execute').click(function(){
var offset = $('.jqTest .inner p').offset();
var position = $('.jqTest .inner p').position();
$('.jqTest').append($(
'<p>[offset.left]' + offset.left + '[offset.top]' + offset.top + '<br />' +
'[position.left]' + position.left + '[position.top]' + position.top + '</p>'
));
});

HTML

<div class="jqTest">
<input type="button" value="execute" class="execute cq-btn m-primary">
<br><br>
<div class="inner">
<div class="inner2">
<p>Test</p>
</div>
</div>
</div>

padding、margin、borderなども考慮される。

参照サイト