What is the difference between offsetX,offsetY and pageX,pageY?

I need a popup div that will appear right below the anchor that i clicked. Now, I want to determin开发者_如何学Ce the x and y coordinates onClick event of an anchor. What's the best practice of doing it? What are the advisable event properties to use?

offsetX and offsetY are relative to the parent container, whereas pageX and pageY are relative to the document. Don't confuse this with .offset() and .position(), in which .offset() is relative to the document and .position() is relative to the parent container's .offset().

Something like this example should work (JQuery):

$('a').click(function(){
    var offset = $(this).offset();
    $('#popup_div').css('top',offset.top + 'px').css('left',offset.left + 'px').show();
});

http://api.jquery.com/offset/

http://api.jquery.com/position/

2 extracts from Jquery Documentation website

The .position() method allows us to retrieve the current position of an element relative to the offset parent

http://api.jquery.com/position/

The .offset() method allows us to retrieve the current position of an element relative to the document.

http://api.jquery.com/offset/