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

102

Cómo obtener y definir la posición de un elemento con el método jQuery .offset?Obtener y establecer la posición con jQuery .offset()

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

Fuente

2011-01-06 Denise

Denise, ¿se comprueba incluso el método() .offset en el sitio web de jQuery? Además, ¿por qué no aceptas la respuesta de Steve a continuación? – Rafid

@Rafid ella básicamente nunca regresó – jcollum

¿Puedo tener sus puntos? – ganders

182

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

//set 
$("#secondElementId").offset({ top: offset.top, left: offset.left});

Fuente

2011-01-06 09:09:16 Steve

Respuesta agradable y clara/limpia. – sabiland

Sólo se puede pasar todo el objeto 'offset', por lo que el' // set' se convertiría en: '$ ("# secondElementId") de compensación (offset)' – mecampbellsoup

bueno.! ¿Cómo puedo establecerme en la parte inferior y derecha de div? no hay propiedad inferior, derecha en offset – JerryGoyal

es factible, pero hay que saber que el uso offset() establece la posición del elemento en relación al documento:

$('.layer1').offset($('.layer2').offset());

Fuente

2011-01-06 09:10:29

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

Aquí es una manera de colocar los elementos utilizando la función de posición:

var options = { 
    "my": "top left", 
    "at": "top left", 
    "of": ".layer1" 
}; 
$(".layer2").position(options);

Fuente

2011-11-14 18:21:15 KSev

+13

Esta respuesta fue rechazada dos veces, sin explicación. Por favor, díganme por qué, si votan por mi respuesta. ¡Gracias! – KSev

Quizás sea porque utilizas jQuery UI mientras que el OP solo pide jQuery. – pram

a menudo la gente va demasiado lejos con la votación hacia abajo. No supongamos que una respuesta más amplia es inútil para los demás, incluso si puede ser una expansión de la OP. No me hagas comenzar en el 'cerrado ya que esta no es una pregunta adecuada';) – landed

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

var div1Pos = $("#div1").offset(); 
var div1X = div1Pos.left; 
$('#div2').css({left: div1X});

Fuente

2013-03-04 20:50:16 hillspro

offset(). Left y css.left no son lo mismo, pueden o no tener los mismos valores dependiendo de la estructura de la página. – Kalle

I + 1 hab. Parece funcionar bien para mí y es esencialmente lo mismo que la respuesta no elegida a continuación que tiene más de 85 votos. –

Funcionó para mí. Gracias por la contribución! –

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/

Fuente

2017-04-29 19:29:56

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

Respuesta

Cuestiones relacionadas