title: How do you dynamically position one element on top of another?
body: <p>I'm dynamically appending some html with jQuery and I want to insert it directly on top of another element. How do I do this?</p>
  
  <p>this is the code in my application.js file:</p>
  
  <pre><code>$(document).ready(function() {
  $('a.oembed').embedly({maxWidth:300,'method':'replace'}).bind('embedly-oembed', function(e, oembed){
        $("#video_div").append($("&lt;img&gt;", { src: oembed.thumbnail_url, width:200 }));
     });
  });
  </code></pre>
  
  <p>The image is being inserted dynamically, and I want it to be directly on top of this:</p>
  
  <pre><code>&lt;div id="video_div"&gt;&lt;%= link_to 'video', @video.video_url, :class =&gt; 'oembed' %&gt;&lt;/div&gt;
  </code></pre>