Positionierung in jQuery

Für die Arbeit mit den Koordinaten von Elementen in jQuery gibt es die Methoden position und offset.

Diese Methoden dienen zum Abrufen oder Ändern der aktuellen Koordinaten eines Elements und geben als Ergebnis ein Objekt zurück, das die Eigenschaften top und left enthält.

Fehler in den Berechnungen können auftreten, wenn der Benutzer die Größe der Seite ändert. Auch die Methoden erhalten nicht die Koordinaten ausgeblendeter Elemente.

Die Methode offset erhält die Position eines Elements relativ zum Dokument, und position die Position eines Elements relativ zum Offset des Elternelements.

Nehmen wir an, wir haben den folgenden HTML-Code:

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

An die Absätze sind CSS-Stile gebunden:

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

Lassen Sie uns die Position der Divs test mit diesen Methoden abrufen und, indem wir auf die Schlüssel des erhaltenen Objekts zugreifen, diese Informationen unten in den Absätzen ausgeben:

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