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


.offset([coordinates]) método 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 en relación con el padre?

Encontré que el método .position() solo obtiene valores "arriba,a la izquierda" en relación con el padre, pero no establece ningún valor.

Lo intenté con

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

, Pero no funciona.

Author: Akhil Thayyil, 2012-10-05

6 answers

Para establecer la posición relativa al padre es necesario establecer el position:relative del padre y position:absolute del elemento

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

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

 193
Author: Champ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-05 12:32:38
$("#mydiv").css('top', 200);

$("#mydiv").css('left', 200);
 34
Author: MMALSELEK,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-05 11:09:48

Puedes probar la interfaz de usuario de jQuery .método position.

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

Compruebe la demostración de trabajo.

 11
Author: xdazz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-20 22:55:57

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

var pos=$('#send').offset().top;
$('#loading').offset({ top : pos-220});
 4
Author: behzad,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-23 07:09:13

Encontré que si el valor pasado es un tipo de cadena, debe ser seguido por 'px' (es decir, 90px), donde si el valor es un entero, agregará el px automáticamente. las propiedades width y height son más tolerantes (cualquiera de los tipos 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
 3
Author: Derek Wade,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-09-24 22:11:36

Refrescando mi memoria al establecer la posición, estoy llegando a esto tan tarde que no se 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 utilizar jQuery interfaz de USUARIO position() setter como se indica por xdazz. Sin embargo, si jQuery UI es, por alguna razón, no una opción (sin embargo, jQuery 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 $div's padre a posicionamiento relativo (¿qué pasa si $div' s ¿el padre estaba, en sí mismo, posicionado dentro de algo más?). Creo que el único caso de borde importante es si $div no tiene ningún offsetParent, no estoy seguro de si regresaría document, null, o 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.

 0
Author: knickum,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-22 17:16:49