Obtener y establecer la posición con jQuery .offset ()

106

¿Cómo obtener y establecer la posición de un elemento con el .offsetmétodo jQuery ?

Digamos que tengo un div layer1y otro layer2. ¿Cómo puedo obtener la posición layer1y establecer la misma posición layer2?

jquery Denise
fuente
6
Denise, ¿incluso revisaste el método .offset () en el sitio web de jQuery? Además, ¿por qué no acepta la respuesta de Steve a continuación?
Rafid
1
@Rafid ella básicamente nunca regresó
jcollum
6
¿Puedo tener sus puntos?
ganders

Respuestas:

191 
//Get
var p = $("#elementId");
var offset = p.offset();

//set
$("#secondElementId").offset({ top: offset.top, left: offset.left});
Steve
fuente
7
Simplemente puede pasar todo el offsetobjeto, por lo que //setse convertiría en: $("#secondElementId").offset(offset)
mecampbellsoup
¡Oye! ¿Cómo puedo configurar en la parte inferior y derecha de div? no hay propiedad inferior derecha en el desplazamiento
JerryGoyal
34

Recomiendo otra opción. jQuery UI tiene una nueva función de posición que le permite colocar elementos entre sí. Para obtener documentación completa y demostración, consulte: http://jqueryui.com/demos/position/#option-offset .

Aquí hay una forma de colocar sus elementos usando la función de posición:

var options = {
    "my": "top left",
    "at": "top left",
    "of": ".layer1"
};
$(".layer2").position(options);
KSev
fuente
13
Esta respuesta fue rechazada dos veces, sin explicación. Por favor, diga por qué, si rechaza mi respuesta. ¡Gracias!
KSev
2
Tal vez sea porque usas jQuery UI mientras que el OP solo pregunta jQuery.
cochecito
7
a menudo la gente va demasiado lejos con la votación negativa. No asumamos que una respuesta más amplia es inútil para otros, incluso si puede ser una expansión del OP. No me hagas comenzar con el 'cerrado, ya que esta no es una pregunta adecuada';)
aterrizó el
@KSev - Soy del futuro. jQuery todavía no tiene un setter en .position... Ver: api.jquery.com/position
Koshinae
@Koshinae Es parte de jQuery "UI". Vea el enlace de arriba o pruebe jqueryui.com/position . Además, si está utilizando jQuery, es posible que desee considerar el uso de angularJS 2.0. Sin embargo, supongo que mantendrá el código heredado.
KSev
16

Es factible, pero debe saber que el uso offset()establece la posición del elemento en relación con el documento:

$('.layer1').offset( $('.layer2').offset() );
Amjad Masad
fuente
0

Aquí tienes una opción. Esto es solo para las coordenadas x.

var div1Pos = $("#div1").offset();
var div1X = div1Pos.left;
$('#div2').css({left: div1X});
Hillspro
fuente
offset (). left y css.left no son lo mismo, pueden tener o no los mismos valores dependiendo de la estructura de la página.
Kalle
Hice +1. Parece funcionar bien para mí y es esencialmente la misma respuesta no elegida a continuación que tiene más de 85 votos.
Paul Nelson Baker
Trabajó para mi. ¡Gracias por la contribución!
Erlend KH
0 
var redBox = $(".post");

var greenBox = $(".post1");

var offset = redBox.offset();

$(".post1").css({'left': +offset.left});
$(".post1").html("Left :" +offset.left);

http://jsfiddle.net/va836/159/

Chirag Suthar
fuente