web-dev-qa-db-fra.com

Dans jQuery, comment définir les propriétés "haut, gauche" d'un élément avec des valeurs de position relatives au parent et non au document?

La méthode .offset([coordinates]) 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 la méthode .position() n'obtient que les valeurs "top, left" 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.

jquerycssjquery-selectorspositioningcss-position
132
Max

Pour définir la position par rapport au parent, vous devez définir le position:relative du parent et le position:absolute de l'élément.

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

Cela fonctionne car position: absolute; se positionne par rapport au parent le plus proche positionné (c'est-à-dire le parent le plus proche avec une propriété de position autre que la valeur par défaut static).

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

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

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émonstration en cours.

13
xdazz

Code de décalage dynamique pour la page dynamique

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

J'ai constaté que si la valeur transmise est un type de chaîne, elle doit être suivie de "px" (c'est-à-dire 90px), où si la valeur est un entier, le px sera ajouté automatiquement. les propriétés width et height sont plus indulgentes (que le type fonctionne).

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
5
Derek Wade

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

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

En me remémorant la position, j'arrive si tard que je ne sais pas si quelqu'un le verra, mais -

Je n'aime pas définir la position à l'aide de css(), même si cela va souvent. Je pense que la meilleure solution consiste à utiliser position() setter de jQuery UI, comme indiqué par xdazz. Cependant, si jQuery UI n'est, pour une raison quelconque, pas une option (pourtant 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
});

Cela a l'avantage de ne pas régler arbitrairement le parent de $div sur un positionnement relatif (que se passe-t-il si le parent de $div est lui-même placé de manière absolue dans quelque chose d'autre?). Je pense que le seul cas majeur dans Edge est que si $div ne possède pas de offsetParent, vous ne savez pas s'il retournera document, null, ou quelque chose d'autre.

offsetParent est disponible depuis jQuery 1.2.6, courant 2008, donc cette technique fonctionne maintenant et lorsque la question initiale a été posée.

0
knickum