Obtenha e defina a posição com jQuery .offset ()

106

Como obter e definir a posição de um elemento com o .offsetmétodo jQuery ?

Digamos que eu tenha um div layer1e outro layer2. Como posso obter a posição layer1e definir a mesma posição para layer2?

jquery Denise
fonte
6
Denise, você ao menos verificou o método .offset () no site da jQuery? Além disso, por que você não aceita a resposta de Steve abaixo ?!
Rafid
1
@Rafid ela basicamente nunca mais voltou
jcollum
6
Posso ter seus pontos?
ganders

Respostas:

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

//set
$("#secondElementId").offset({ top: offset.top, left: offset.left});
Steve
fonte
7
Você pode simplesmente passar o offsetobjeto inteiro , então //setele se tornaria: $("#secondElementId").offset(offset)
mecampbellsoup
Ei! como posso definir a parte inferior e direita de div? não há propriedade inferior correta no deslocamento
JerryGoyal
34

Eu recomendo outra opção. O jQuery UI possui um novo recurso de posição que permite posicionar elementos em relação uns aos outros. Para documentação completa e demonstração, veja: http://jqueryui.com/demos/position/#option-offset .

Esta é uma maneira de posicionar seus elementos usando o recurso de posição:

var options = {
    "my": "top left",
    "at": "top left",
    "of": ".layer1"
};
$(".layer2").position(options);
KSev
fonte
13
Esta resposta foi rejeitada duas vezes, sem explicação. Por favor, diga por que, se você votar contra minha resposta. Obrigado!
KSev
2
Talvez seja porque você usa jQuery UI enquanto o OP pede apenas jQuery.
carrinho
7
muitas vezes as pessoas vão longe demais com a votação negativa. Não vamos supor que uma resposta mais ampla seja inútil para os outros, mesmo que seja uma expansão do OP. Não me fale sobre o 'fechado, pois esta não é uma pergunta adequada';)
desembarcou em
@KSev - Eu sou do futuro. jQuery ainda não tem um setter ligado .position... Veja: api.jquery.com/position
Koshinae
@Koshinae Faz parte do jQuery "UI". Veja o link acima ou experimente jqueryui.com/position . Além disso, se estiver usando jQuery, você pode querer considerar o uso do angularJS 2.0. No entanto, espero que você mantenha o código legado.
KSev
16

É possível, mas você deve saber que o uso de offset()define a posição do elemento em relação ao documento:

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

Aqui está uma opção. Isso é apenas para as coordenadas x.

var div1Pos = $("#div1").offset();
var div1X = div1Pos.left;
$('#div2').css({left: div1X});
Hillspro
fonte
offset (). left e css.left não são a mesma coisa, eles podem ou não ter os mesmos valores dependendo da estrutura da página.
Kalle
Eu marquei com +1. Parece funcionar muito bem para mim e é essencialmente o mesmo que a resposta não escolhida abaixo que tem mais de 85 votos.
Paul Nelson Baker de
Funcionou para mim. Obrigado pela contribuição!
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
fonte