title: How to position a div next to element with absolute position?
body: <p>I am trying to create a <code>div</code> that can be attached to an element whenever user hover to the link</p>
  
  <p>I have many links and my codes look like the following.</p>
  
  <p><code>for loops</code> to create many links</p>
  
  <pre><code>codes....
  
  link.href='#';
  link.innerHTML = 'test'
  link.onmouseover = OnHover;
  
  codes....
  
  
  function OnHover(){
      var position;
      var div = document.createElement('div');
          div.className='testdiv';
          div.innerHTML = 'test';
  
          position=$(div).position();
  
          div.style.top = position['top'] + 15 + 'px';
          $(this).prepend(div);
  }
  
  
      link element1
      link element2
   ----
  |    |   //add new div when hover link element2
   ----
      link element2
      link element3
  
  
  
  my css
  
  .testdiv{
      position:absolute;
  }
  </code></pre>
  
  <p>I want to add a new <code>div</code> everytime the user hover to my link and position on the <code>left top</code> of the element.</p>
  
  <p>My code would position all the div on top instead of every element.</p>
  
  <p>Are there anyway to do this? Thanks so much!</p>