En jQuery, ¿cómo puedo establecer las propiedades "superior, izquierda" de un elemento con valores de posición relativos al padre y no al documento?

.offset([coordinates])El método establece las coordenadas de un elemento pero solo en relación con el documento. Entonces, ¿cómo puedo establecer coordenadas de un elemento pero en relación con el padre?

Encontré que el .position()método obtiene solo valores "superiores, izquierdos" relativos al padre, pero no establece ningún valor.

Lo intenté con

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

Pero no funciona.

Para establecer la posición relativa al elemento primario, debe establecer el elemento position:relativeprimario y position:absoluteel elemento

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

Esto funciona porque se position: absolute;posiciona relativamente al padre posicionado más cercano (es decir, el padre más cercano con cualquier propiedad de posición que no sea la predeterminada static).

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

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

Puede probar el método .position de jQuery UI .

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

Verifique la demostración de trabajo.

Descubrí que si el valor pasado es un tipo de cadena, debe ir seguido de 'px' (es decir, 90 px), donde si el valor es un entero, agregará el px automáticamente. las propiedades de ancho y alto son más indulgentes (cualquier tipo funciona).

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

Código offset dinámico para página dinámica

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

Refrescando mi memoria en la posición de ajuste, llego a esto tan tarde que no sé si alguien más lo verá, pero ...

No me gusta establecer la posición usando css(), aunque a menudo está bien. Creo que la mejor opción es usar el position()setter de jQuery UI como lo señala xdazz. Sin embargo, si jQuery UI no es, por alguna razón, una opción (pero jQuery sí lo es), prefiero esto:

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

Esto tiene la ventaja de no establecer arbitrariamente a $divlos padres en un posicionamiento relativo (¿qué pasaría si $divel padre estuviera, en sí mismo, en una posición absoluta dentro de otra cosa?). Creo que el único caso mayor ventaja es que si $divno tiene ninguna offsetParent, no estoy seguro si volvería document, nullo algo completamente distinto.

offsetParent ha estado disponible desde jQuery 1.2.6, en algún momento de 2008, por lo que esta técnica funciona ahora y cuando se hizo la pregunta original.

Utilice la offset()función de jQuery. Aquí estaría:

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