logo oujood
🔍

La méthode .offset() en jQuery

Obtenez ou modifiez la position absolue d'un élément par rapport au document

OUJOOD.COM

jQuery cours tutorial

Définition et usage de .offset()

La méthode .offset() retourne la position actuelle d'un élément par rapport au document, exprimée en pixels. Le résultat est un objet contenant deux propriétés : top (distance depuis le haut de la page) et left (distance depuis le bord gauche).

C'est la méthode à utiliser quand on a besoin de la position absolue dans la page — par exemple pour placer dynamiquement un tooltip, calculer un décalage lors d'un glisser-déplacer, ou ancrer un élément flottant. À ne pas confondre avec .position(), qui retourne les coordonnées par rapport au parent positionné.

Syntaxe — lecture :

$(sélecteur).offset()

L'appel sans argument retourne un objet { top: valeur, left: valeur }. On accède ensuite à chaque propriété séparément.

Exemple 1 — Lire les coordonnées d'un élément

Au clic sur le bouton, on récupère la position du paragraphe et on l'affiche dans une alerte. Les valeurs sont en pixels depuis le coin supérieur gauche du document.

  📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>jQuery .offset() — lecture</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      var pos = $("p").offset(); // retourne { top: x, left: y }
      alert("Left : " + pos.left + "px — Top : " + pos.top + "px");
    });
  });
  </script>
</head>
<body>
  <p>Ceci est un paragraphe.</p>
  <button>Lire les coordonnées de &lt;p&gt;</button>
</body>
</html>

Définir les coordonnées d'un élément avec .offset()

La même méthode sert aussi à déplacer un élément. On lui passe un objet contenant les nouvelles valeurs top et left en pixels. jQuery ajuste automatiquement le CSS de l'élément pour qu'il atteigne cette position dans le document.

Syntaxe — écriture :

$(sélecteur).offset(valeur)

Paramètre

Description

valeur

Obligatoire. Un objet contenant les propriétés top et left, exprimées en pixels. Deux formes acceptées :

  • Objet littéral : { top: 100, left: 0 }
  • Fonction qui retourne un tel objet (voir l'exemple 3)

Exemple 2 — Déplacer un élément à une position fixe

Au clic, le paragraphe est repositionné à 100px du haut et 0px du bord gauche du document. L'élément doit être en position relative ou absolute pour que le déplacement soit visible.

  📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>jQuery .offset() — écriture fixe</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      // Déplace <p> à top:100px, left:0 dans le document
      $("p").offset({ top: 100, left: 0 });
    });
  });
  </script>
</head>
<body>
  <p style="position:relative">Ceci est un paragraphe.</p>
  <button>Déplacer le paragraphe</button>
</body>
</html>

Définir la position à l'aide d'une fonction

Quand on veut calculer la nouvelle position à partir de la position actuelle, on passe une fonction à .offset(). Cette fonction reçoit deux arguments : l'index de l'élément dans la sélection, et ses coordonnées actuelles. Elle doit retourner un objet { top, left }.

Syntaxe :

$(sélecteur).offset(function(index, oldOffset))

Paramètre

Description

function(index, oldOffset)

Fonction callback appelée pour chaque élément sélectionné. Elle reçoit :

  • index — position de l'élément dans la sélection jQuery (0 pour le premier)
  • oldOffset — objet { top, left } avec les coordonnées actuelles

Elle doit retourner un objet { top, left } avec les nouvelles coordonnées.

Exemple 3 — Déplacer un élément de 100px vers le bas et vers la droite

Chaque clic sur le bouton décale le paragraphe de 100px par rapport à sa position actuelle, dans les deux directions.

  📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>jQuery .offset() — fonction</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").offset(function(index, oldOffset){
        // Décale de 100px depuis la position actuelle à chaque clic
        return {
          top:  oldOffset.top  + 100,
          left: oldOffset.left + 100
        };
      });
    });
  });
  </script>
</head>
<body>
  <p style="position:relative">Ceci est un paragraphe.</p>
  <button>Décaler de 100px</button>
</body>
</html>

.offset() ou .position() — laquelle choisir ?

Les deux méthodes retournent un objet { top, left }, mais elles ne mesurent pas la même chose.

  • .offset() — coordonnées par rapport au document entier. Utile pour positionner des éléments en superposition (modales, tooltips, menus contextuels).
  • .position() — coordonnées par rapport au parent positionné le plus proche. Utile pour un positionnement relatif à l'intérieur d'un conteneur.

Règle simple : si vous travaillez en dehors d'un conteneur positionné, utilisez .offset(). Sinon, .position() est souvent plus adapté.

Compatibilité jQuery 4.0

jQuery 4.0.0 est sorti le 17 janvier 2026 — premier release majeur en presque dix ans. .offset() n'a subi aucun changement de comportement dans cette version : même syntaxe, même retour { top, left }, mêmes règles (pas d'éléments masqués via display:none). Les exemples de cette page fonctionnent à l'identique sur jQuery 3.x et 4.x.

Si votre projet tourne encore sur jQuery 3.x, pas d'urgence à migrer pour .offset(). En revanche, d'autres méthodes ont été supprimées dans jQuery 4.0 — consultez le guide de migration officiel avant toute mise à jour.

Par carabde | Mis à jour le 12 mai 2026

   Sommaire