title: Display <div> relative to <textarea>
body: <p>I have a box (a single absolutely positioned <code>&lt;div&gt;</code>). I also have a series of <code>&lt;textarea&gt;</code> and <code>&lt;input type="text"&gt;</code> form controls. When I focus on any <code>&lt;textarea&gt;</code> I want to display the box to the left on the focused item (covering whatever lies beneath), possibly with a fancy faceIn() animation:</p>
  
  <pre class="lang-none prettyprint-override"><code>+-----------+---------------------------
  | div       | textarea                 |
  |           |                          |
  |           |                          |
  +-----------+                          |
              |                          |
              |                          |
              |                          |
              +--------------------------+
  </code></pre>
  
  <p>I <em>think</em> I can use jQuery or jQuery UI Position to position the element for me (after all, calendars displayed by jQuery UI Datepicker behaviour are quite similar to what I want for my box) but I can't make my way through docs. First of all, both libraries have different items with the same name:</p>
  
  <ul>
  <li>jQuery: <a href="http://api.jquery.com/position/" rel="nofollow">.position()</a></li>
  <li>jQuery UI: <a href="http://api.jqueryui.com/position/" rel="nofollow">.position()</a></li>
  </ul>
  
  <p>... and both have the same kind of limitation:</p>
  
  <ul>
  <li><em>jQuery does not support getting the position coordinates of hidden elements</em></li>
  <li><em>jQuery UI does not support positioning hidden elements.</em></li>
  </ul>
  
  <p>My code so far looks like this:</p>
  
  <pre class="lang-css prettyprint-override"><code>#box{
      left: 0;
      top: 0;
      position: absolute;
      width: 30px;
      height: 20px;
      background-color: orange;
  }
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>var $box = $('&lt;div id="box"&gt;&lt;/div&gt;').hide().appendTo("#main-form");
  $("#main-form").on("focus", ":text, textarea", function(){
      $text = $(this);
      $box.show("slow").position({
          my: "left top",
          at: "left top",
          of: $text
      });
  });
  </code></pre>
  
  <p>When I focus a textarea, <code>$box</code> shows up but it doesn't move from the left top corner of the window.</p>
  
  <p>What am I missing?</p>
  
  <hr>
  
  <p><strong>Edit:</strong> With your advice, I quickly made it work (an animation-less version) in a <a href="http://jsfiddle.net/2VUnd/" rel="nofollow">Fiddle</a> but not in my app. Further debugging revealed I had forgotten to include the <code>Position</code> component in my jQuery UI custom download! It wasn't throwing an error because of the method with the same name in jQuery. Apparently, when you have both enabled, you get one or another depending on the <em>arguments</em>...</p>