In jQuery come posso impostare le proprietà "top, left" di un elemento con valori di posizione relativi al genitore e non al documento?

.offset([coordinates])Il metodo imposta le coordinate di un elemento ma solo relative al documento. Quindi come posso impostare le coordinate di un elemento ma rispetto al genitore?

Ho scoperto che il .position()metodo ottiene solo valori "top, left" relativi al genitore, ma non imposta alcun valore.

Ci ho provato

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

ma non funziona.

Per impostare la posizione relativa al genitore è necessario impostare il position:relativegenitore e position:absolutel'elemento

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

Questo funziona perché le position: absolute;posizioni sono relativamente al genitore posizionato più vicino (cioè il genitore più vicino con qualsiasi proprietà di posizione diversa da quella predefinita static).

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

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

Puoi provare il metodo .position dell'interfaccia utente di jQuery .

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

Controlla la demo funzionante.

Ho scoperto che se il valore passato è un tipo di stringa, deve essere seguito da 'px' (ovvero 90px), dove se il valore è un numero intero, aggiungerà automaticamente px. le proprietà di larghezza e altezza sono più tolleranti (entrambi i tipi di opere).

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

Offset codice dinamico per pagina dinamica

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

Rinfrescando la mia memoria sulla posizione impostata, arrivo così tardi che non so se lo vedrà qualcun altro, ma -

Non mi piace impostare la posizione usando css(), anche se spesso va bene. Penso che la scommessa migliore sia quella di usare il position()setter dell'interfaccia utente di jQuery come notato da xdazz. Tuttavia, se per qualche motivo l'interfaccia utente di jQuery non è un'opzione (eppure lo è jQuery), preferisco questo:

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

Questo ha il vantaggio di non impostare arbitrariamente $divil genitore sul posizionamento relativo (e se $divil genitore fosse, di per sé, posizionato in modo assoluto all'interno di qualcos'altro?). Credo che l'unico caso limite principale è se $divnon ha offsetParent, non so se sarebbe tornato document, nullo qualcosa di completamente diverso.

offsetParent è disponibile da jQuery 1.2.6, nel 2008, quindi questa tecnica funziona ora e quando è stata posta la domanda originale.

Utilizzare la offset()funzione di jQuery. Qui sarebbe:

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