Como encontro a posição absoluta de um elemento usando jQuery?


399

Existe uma maneira de encontrar a posição absoluta de um elemento, ou seja, em relação ao início da janela, usando jQuery?

Respostas:


651

.offset() retornará a posição de deslocamento de um elemento como um objeto simples, por exemplo:

var position = $(element).offset(); // position = { left: 42, top: 567 }

Você pode usar esse valor de retorno para posicionar outros elementos no mesmo local:

$(anotherElement).css(position)

90
Eu sempre esqueço este, e encontrar o seu post novamente quando eu google: p
Aren

16
Isso nem sempre parecem retornar a posição absoluta devido a diferenças nas fronteiras etc.
Tom

8
Estou usando o chrome e o offset()não retorna a coordenada superior adequada. Ele retorna cerca de 300 pixels a mais do que a coordenada superior do elemento no documento. Por quê??
SoLoGHoST 23/04

11
chrome, FF e IE estão dando resultados diferentes :(
Rizwan Mumtaz

3
@Aren Eu sempre esqueço este e acho o seu comentário sempre divertido :)
Alex

197

Observe que $(element).offset()indica a posição de um elemento em relação ao documento . Isso funciona muito bem na maioria das circunstâncias, mas position:fixedvocê pode obter resultados inesperados.

Se o seu documento for maior que a viewport e você tiver rolado verticalmente em direção à parte inferior do documento, position:fixedo offset()valor do seu elemento será maior que o valor esperado pela quantidade que você rolou.

Se você estiver procurando por um valor relativo à viewport (janela), em vez do documento em uma posição: elemento fixo, poderá subtrair o scrollTop()valor do documento do valor do elemento fixo offset().top. Exemplo:$("#el").offset().top - $(document).scrollTop()

Se o position:fixedpai de deslocamento do elemento for o documento , você deseja lerparseInt($.css('top')) .


8
Eu estava procurando exatamente por isso! Para os noob como eu: o valor a ser subtraído é$(document).scrollTop()
Dr. Gianluigi Zane Zanettini

3
Impressionante! Essa deve ser a melhor resposta!
Shivanshu Goyal
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.