title: Position absolute for a rotated Div
body: <p>I have a parent div and child div. Child is position absolute with respect to parent div. Child div is rotated by <code>90 degrees</code>. Since the origin is the center (meeting point of 2 diagonals) of the child, the child div is shifted pixels outside of the container.</p>
  
  <p>To elaborate this problem I have added 2 parents-child output in the fiddle below.
  <a href="http://jsfiddle.net/Xja29/" rel="nofollow">http://jsfiddle.net/Xja29/</a></p>
  
  <p>In the fiddle I have added an event which resets the child position to the top-left corner of their respective parents. Here is the reset code. Note top &amp; left values are different for the 2 child divs</p>
  
  <p><strong>JQuery Code:</strong></p>
  
  <pre><code>    $("#link").click(function(){
  
          //Child 1 needs top=45 and left=-45
          $("#c1").css({"top":"45px", "left":"-45px"});
  
          //Whereas Child 2 needs top=30 and left=-30
          $("#c2").css({"top":"25px", "left":"-25px"});
  
          //As one can see there are different values for top and left for childs of different dimension. Is there any relation or formula to find out this values?
      });
  </code></pre>
  
  <p>Exactly, I want to find out the relation between rotation angle, width, height and co-ordinate system of the child div. Please let me know if anything such exists. Thank you.</p>