Dans jQuery, comment puis-je définir les propriétés «haut, gauche» d'un élément avec des valeurs de position par rapport au parent et non au document?

.offset([coordinates])La méthode définit les coordonnées d'un élément mais uniquement par rapport au document. Alors, comment puis-je définir les coordonnées d'un élément mais par rapport au parent?

J'ai trouvé que cette .position()méthode n'obtient que les valeurs «haut, gauche» par rapport au parent, mais elle ne définit aucune valeur.

J'ai essayé avec

$("#mydiv").css({top: 200, left: 200});

mais ne fonctionne pas.

Pour définir la position par rapport au parent, vous devez définir le position:relativeparent et position:absolutel'élément

$("#mydiv").parent().css({position: 'relative'});
$("#mydiv").css({top: 200, left: 200, position:'absolute'});

Cela fonctionne parce que les position: absolute;positions par rapport à la plus proche positionné parent (c. -à- parent le plus proche avec une propriété de position autre que la valeur par défaut static).

$("#mydiv").css('top', 200);

$("#mydiv").css('left', 200);

Vous pouvez essayer la méthode .position de jQuery UI .

$("#mydiv").position({
  of: $('#mydiv').parent(),
  my: 'left+200 top+200',
  at: 'left top'
});

Vérifiez la démo de travail.

J'ai trouvé que si la valeur passée est un type de chaîne, elle doit être suivie de «px» (c'est-à-dire 90px), où si la valeur est un entier, elle ajoutera automatiquement le px. les propriétés de largeur et de hauteur sont plus indulgentes (les deux types fonctionnent).

var x = "90";
var y = "120"
$(selector).css( { left: x, top: y } )        //doesn't work
$(selector).css( { left: x + "px", top: y + "px" } )        //does work

x = 90;
y = 120;
$(selector).css( { left: x, top: y } )        //does work

Décalage de code dynamique pour page dynamique

var pos=$('#send').offset().top;
$('#loading').offset({ top : pos-220});

Rafraîchissant ma mémoire en réglant la position, j'y arrive si tard que je ne sais pas si quelqu'un d'autre le verra, mais -

Je n'aime pas régler la position en utilisant css(), même si souvent c'est bien. Je pense que le meilleur pari est d'utiliser le position()setter de jQuery UI comme indiqué par xdazz. Cependant, si jQuery UI n'est, pour une raison quelconque, pas une option (mais jQuery l'est), je préfère ceci:

const leftOffset = 200;
const topOffset = 200;
let $div = $("#mydiv");
let baseOffset = $div.offsetParent().offset();
$div.offset({
  left: baseOffset.left + leftOffset,
  top: baseOffset.top + topOffset
});

Ceci a l'avantage de ne pas placer arbitrairement $divle parent du parent sur un positionnement relatif (et si $divle parent du parent était, lui-même, positionné en absolu à l'intérieur d'autre chose?). Je pense que le seul grand cas limite est de savoir si $divne pas offsetParent, pas sûr si elle retournerait document, nullou tout autre chose.

offsetParent est disponible depuis jQuery 1.2.6, quelque part en 2008, donc cette technique fonctionne maintenant et quand la question d'origine a été posée.

Utilisez la offset()fonction de jQuery. Ici, ce serait:

$container.offset({
        'left': 100,
        'top': mouse.y - ( event_state.mouse_y - event_state.container_top ) 
    });