title: Appended div not located properly
body: <p>My code:</p>
  
  <pre><code>&lt;body&gt;                                      
       &lt;div id ="container" style="position:relative;margin-top:50px;width:100px;height:100px;border: 2px solid #a1a1a1;"/&gt;
       &lt;button onclick="myFunction()"&gt;Append&lt;/button&gt;             
  
  &lt;script type="text/javascript" language="javascript"&gt;
  
          function myFunction() {
              var tooltipdivRect = $("&lt;div id=" + "ToolTip&gt;&lt;/div&gt;");
              $(tooltipdivRect).css('top', '20px', 'left', '0px', 'width', '20px', 'height', '20px', "border-color", 'red', 'border', '2px solid #a1a1a1', 'position', 'absolute');
              $(tooltipdivRect).html("check")
              document.getElementById("container").appendChild(tooltipdivRect[0]);
          }
       &lt;/script&gt;             
  &lt;/body&gt;
  </code></pre>
  
  <p>When I append the tooltip <code>div</code> it can't append the exact location.. I set the location top as 20 but it was appended at 50... because the parent div position as relative... i need to append the tooltip div exact location what i mentioned</p>
  
  <p>How do I solve this without change the position(both parent and child)?</p>