Posisi dalam jQuery

Untuk bekerja dengan koordinat elemen dalam jQuery terdapat metode position dan offset.

Metode-metode ini berfungsi untuk mendapatkan atau mengubah koordinat elemen saat ini dan sebagai hasilnya mengembalikan objek yang berisi properti top dan left.

Kesalahan dalam perhitungan dapat terjadi jika pengguna mengubah ukuran halaman. Juga, metode tidak mendapatkan koordinat elemen yang tersembunyi.

Metode offset mendapatkan posisi elemen relatif terhadap dokumen, sedangkan position mendapatkan posisi elemen relatif terhadap indentasi induk.

Misalkan kita memiliki kode HTML berikut:

<div id="parent">
<p id="test">teks</p>
</div>
<p id="text1"></p>
<p id="text2"></p>

Style CSS diterapkan pada paragraf:

#parent {
	width: 150px;
	border: 1px solid blueviolet;
}
#test {
	margin: 5px;
	text-align: center;
	outline: 1px solid green;
}

Mari kita dapatkan posisi div test dengan metode-metode ini, dan, dengan mengakses kunci objek yang diperoleh, tampilkan informasi ini di bawah ini dalam paragraf:

let offset = $('#test').offset();
$('#text1').text(
	'(OFFSET()) left: ' + offset.left + ', top: ' + offset.top
);
let position = $('#test').position();
$('#text2').text(
	'(POSITION()) left: ' + position.left + ', top: ' + position.top
);