Método offset

O método offset permite obter a posição do elemento em relação ao documento, ao contrário do método position, que obtém coordenadas em relação às margens do elemento pai. O método offset é mais útil para posicionar um novo elemento sobre um existente para manipulações globais, por exemplo, para implementar drag-and-drop (arrastar e soltar). Como resultado, o método retorna um objeto contendo as propriedades top e left. Erros de cálculo podem ocorrer se o usuário alterar o tamanho da página. O método também não obtém as coordenadas de elementos ocultos.

Sintaxe

Obter as coordenadas atuais. Em alguns casos, os valores obtidos podem ser fracionários:

$(seletor).offset();

Para alterar as coordenadas do elemento, é necessário passar um objeto contendo as propriedades top e left:

$(seletor).offset({top: 40, left: 40});

Também podemos aplicar uma função definida a cada elemento no conjunto. Neste caso, o primeiro parâmetro da função receberá o índice do elemento no conjunto, e o segundo parâmetro - um objeto com as coordenadas top e left. this dentro da função irá apontar para o elemento atual. Os valores das coordenadas do elemento serão alterados para aqueles retornados pela função:

$(seletor).offset(function(índice no conjunto, {coordenadas atuais}));

Exemplo

Vamos obter a posição do div (quadrado verde), usando o método offset, e então, acessando as chaves do objeto obtido, exibir essa informação:

<div id="result">clique em um quadrado ...</div>
<div id="test"></div>

#test {
	position: absolute;
	top: 40px;
	left: 40px;
	width: 100px;
	height: 100px;
	background: green;
	color: white;
	margin-top: 10px;
	cursor: pointer;
}

$('*', document.body).click(function(event) {
	let offset = $(this).offset();
	
	event.stopPropagation();
	$('#result').text('Left: ' + offset.left + ', Top: ' + offset.top);
});

Exemplo

Vamos alterar as coordenadas do segundo parágrafo:

<p style="margin-left: 10px;">texto1</p>
<p style="margin-left: 10px;">texto2</p>

$('p').last().offset({top: 40, left: 60});

Veja também

método position,
que permite obter as atuais coordenadas do elemento
método offsetParent,
que permite obter o ancestral posicionado mais próximo do elemento
método css,
que permite obter e alterar estilos CSS do elemento