jQueryのoffset()とposition()の違い

jQueryのoffset()はよく使うのですが、position()はあまり使ったことがないので試してみました。

サンプルコード

offset()はドキュメント上の表示位置、position()は親要素から見た表示位置を取得できます。

HTML

<div class="wrapper">
	<div class="box"></div>
</div>

CSS

.wrapper {
	position: absolute;
	top: 100px;
	left: 100px;
	width: 500px;
	height: 500px;
	background: #000;
}
.box {
	position: absolute;
	top: 100px;
	left: 100px;
	width: 200px;
	height: 200px;
	background: #cccccc;
}

JavaScript

$(function() {
	console.log($('.box').offset().top); // 200
	console.log($('.box').position().top); // 100
});

offset()とposition()の使い方のデモページ
　

【参考サイト】

• jQuery： 親要素に対する相対的な表示位置を取得するには？（position） – Build Insider