javascript - jquery co-ordinate problems on an image with in a absolute positioned div -

i have problem recording x , y co-ordinates using jquery/javascript, on image in 'position: absolute div' container.

basically supposed happen somewhere in image clicked, , div containing information placed on co-ordinates.

however when image's div container has position absolute, x , y co-ordinates off, needs there overlay image on divs, unless can think of better way?

below code, appreciated

<style>     #image_container {position: absolute}     #test_img {}     .image_dot { height: 5px; width: 5px; background-color: red; position: absolute; } </style>  <div id="image_container">     <img src="mrt.jpg" id="test_img" />  </div> <script type="text/javascript">       $("#test_img").click(function(event) {         var x = event.pagex - this.offsetleft;         var y = event.pagey - this.offsettop;         $("#image_container").append('<div class="image_dot" id="uniqueid" style="display: none;">some text</div>');         $("#unqiueid").css("top",x+"px").css("left",y+"px").show();     }); </script> 

i'm not sure if work since don't have time set test-case, think if possible should let click() event bubble body element. example:

$(body).click(function(e) {     var x = event.pagex;     var y = event.pagey;     $("body").append('<div class="image_dot" id="uniqueid" style="display: none;">some text</div>');     $("#unqiueid").css("top",x+"px").css("left",y+"px").show(); } 

if being positioned absolute anyway (and not relative), shouldn't matter, , believe should better pagex , pagey values using body (or maybe window?) element.

as said, though, haven't had chance test this. let me know if works!