jquery - div - offset bottom

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

Question

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

Encontré que el método .position() 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.

Answer 1

Al actualizar mi memoria para establecer la posición, estoy llegando 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 setter de position() jQuery UI como lo señala xdazz. Sin embargo, si jQuery UI es, por alguna razón, no una opción (aunque 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 el padre de $div en el posicionamiento relativo (¿qué $div si el padre de $div estuviera, en sí mismo, en una posición absoluta dentro de otra cosa?). Creo que el único caso importante es si $div no tiene ningún offsetParent , no está seguro de si devolverá el document , null o algo completamente diferente.

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 formuló la pregunta original.

Answer 2

Descubrí que si el valor pasado es un tipo de cadena, debe ir seguido de ''px'' (es decir, 90px), donde si el valor es un entero, agregará el px automáticamente. las propiedades de ancho y alto son más indulgentes (cualquiera de las dos 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

Answer 3

Desplazamiento de código dinámico para página dinámica

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

Answer 4

Para establecer la posición relativa al padre, debe establecer la position:relative de padre y position:absolute del elemento

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

Esto funciona porque position: absolute; posiciones relativamente al padre ubicado más cercano (es decir, el padre más cercano con cualquier propiedad de posición distinta de la static predeterminada).

Answer 5

Podría probar el método .position jQuery UI.

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

Verifique la demostración funcional.

Answer 6

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

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