Appending the object in the place of click with absolute position

Question

I would like to append the element with absolute position in the place of my click. I don't know how can I measure top and left css attributers.

Here is my JS which is appending the div editor.

$(document).on('dblclick', '.slide', function() {
   $(this).find(".step-wrapper").prepend('<div class="editor" contenteditable="true">  <h2  class="text2">Title</h2></div>'); 
});

the html structure:

<dic class="step">
  <div class="step-wrapper">
  </div>
</div>

Answer 1

like this ?

http://jsfiddle.net/pWqEQ/

.css({
        'left' : e.pageX,
        'top'  : e.pageY
    }