How to get the position of a span nested within a textarea
<p>I have a span that is nested within a textarea, and would like to get the offset of this span relative to the document.  Zero is always returned for left and top, and I'm not sure why.</p>

<p>Here is a <a href="http://jsfiddle.net/c2J36/" rel="nofollow">jsFiddle</a> with the following code to demo</p>

<pre><code>$(document).ready(function(){
  $("#textarea1").html("1234 &lt;span id='span1' style='color:red'&gt;5678&lt;/span&gt;");
  var offset = $("#span1").offset();
  alert("span1 left: " + offset.left + "  top: " + offset.top);
});
</code></pre>

<p>I see why the position of the span would be zero, relative to the textarea.  But I don't understand why the offset is returning zero.  If anyone could help me out here I'd appreciate it.</p>

<hr>

<p>Edit: My goal was to position something above the span when it was clicked.  I couldn't get the offset of the span mentioned above, so I decided to use the mouse coordinates instead.</p>

<pre><code>$("#id").dblclick(function(e){
 alert("X: " + e.pageX + " Y: " + e.pageY);
});
</code></pre>
