Exemplo
Portanto, se tivéssemos um elemento filho com um ID de "elemento filho" e desejássemos obter sua posição superior / esquerda em relação a um elemento pai, digamos uma div que tivesse uma classe de "item pai", teríamos use este código.
var position = $("#child-element").offsetRelative("div.item-parent");
alert('left: '+position.left+', top: '+position.top);
Plugin Finalmente, para o plugin real (com algumas notas expalaining o que está acontecendo):
// offsetRelative (or, if you prefer, positionRelative)
(function($){
$.fn.offsetRelative = function(top){
var $this = $(this);
var $parent = $this.offsetParent();
var offset = $this.position();
if(!top) return offset; // Didn't pass a 'top' element
else if($parent.get(0).tagName == "BODY") return offset; // Reached top of document
else if($(top,$parent).length) return offset; // Parent element contains the 'top' element we want the offset to be relative to
else if($parent[0] == $(top)[0]) return offset; // Reached the 'top' element we want the offset to be relative to
else { // Get parent's relative offset
var parent_offset = $parent.offsetRelative(top);
offset.top += parent_offset.top;
offset.left += parent_offset.left;
return offset;
}
};
$.fn.positionRelative = function(top){
return $(this).offsetRelative(top);
};
}(jQuery));
Nota: Você pode usar isso no evento mouseClick ou mouseover
$(this).offsetRelative("div.item-parent");