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?

144

.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.

Max
fuente

Respuestas:

227

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).

Morder
fuente
13
$("#mydiv").css({top: '200px', left: '200px', position:'absolute'});<- bueno $("#mydiv").css({top: '200', left: '200', position:'absolute'});<- malo. Aparentemente, si los valores de posición son cadenas , debe incluir las unidades, o no tendrá ningún efecto.
Bob Stein
1
Esa nota acerca de tener un padre en posición relativa me ahorró mucha frustración. Gracias.
NuclearPeon el
39
$("#mydiv").css('top', 200);

$("#mydiv").css('left', 200);
MMALSELEK
fuente
77
un poco más de instrucción ayudaría aquí
paloma
1
o $ ("# mydiv"). css ({'top': 200, 'left': 200});
Nick B
En otras palabras, ¿el OP habría sido correcto si simplemente hubieran citado "arriba" y "izquierda"?
RufusVS
13

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.

xdazz
fuente
10
.position () no tiene setter
devnull69
¿Dónde dice exactamente que puede establecer la posición? Creo que solo puede encontrar los valores, no cambiarlos.
Chris
1
¡El método .position () no establece valores!
Max
¡¡¡Muy interesante!!! Su código es muy útil cuando no puede establecer la propiedad de posición css del elemento principal (como se menciona en la respuesta principal) porque es un widget de interfaz de usuario y no desea cambiar su configuración para una actividad fluida. Por supuesto, esto solo ocurre cuando estás usando jQuery UI. Encontré este pequeño problema con el widget jQuery UI "arrastrable".
Max
6

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
Derek Wade
fuente
6

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

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

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.

Knickum
fuente
0

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 ) 
    });
Sreekanth S
fuente