jQuery'de Konumlandırma

jQuery'de eleman koordinatları ile çalışmak için position ve offset metotları vardır.

Bu metotlar, elemanın mevcut koordinatlarını almak veya değiştirmek için kullanılır ve sonuç olarak top ve left özelliklerini içeren bir nesne döndürür.

Hesaplama hataları, kullanıcı sayfanın boyutlarını değiştirdiğinde ortaya çıkabilir. Ayrıca metotlar gizli elemanların koordinatlarını alamaz.

offset metodu, elemanın konumunu belgeye göre alır, position metodu ise elemanın konumunu üst öğenin kenar boşluklarına göre alır.

Aşağıdaki HTML koduna sahip olduğumuzu varsayalım:

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

Paragraflara CSS stilleri uygulanmıştır:

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

Şimdi test div'inin konumunu bu metotlarla alalım ve elde edilen nesnenin anahtarlarına erişerek bu bilgiyi aşağıdaki paragraflara yazdıralım:

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
);