title: How to reposition a relative DIV using left/top?
body: <p>I have a <code>div</code> with the attribute <code>position: relative;</code>. Now, there are three of these <code>div</code>s. They all get a unique ID etc.</p>
  
  <p>Now if I click a <code>div</code>, I want it to animate to a certain position in the document. Although I cannot determine the left/top values since if I use "top" and "left", it will relatively set the left to its parents position.</p>
  
  <p>Maybe a bit unclear, but here is what I got.</p>
  
  <p>The CSS of the clickable <code>DIV</code> that will move.</p>
  
  <pre class="lang-css prettyprint-override"><code>div#left_hldr .switch_project {
    z-index: 1001;
    position: relative;
    margin: 10px 0px 0px 0px;
    cursor: pointer;
  }
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>// Open project.
  $(".switch_project").live('click', function() {
  
    // Get the ID value.
    var More_Id = $(this).attr("id");
  
    // Explode the Id.
    var Id_Split = More_Id.split("_");
  
    // Get the project ID.
    var Project_Id = Id_Split[2];
  
    /*
        Replacement of the switch project div.
        1 ) Define the current position.
        2 ) Define the new position.
        3 ) Replace the DIV to the new position.
        4 ) Fade the new page in.
        5 ) Put the DIV back to its original position.
    */
  
    // Current Position.
    var Ori_Left = $(this).offset().left;
    var Ori_Top = $(this).offset().top;
  
    // New Position.  [ Based on the content_hldr container ]
    var New_Top = $("div#content_hldr").offset().top;
    var New_Left = $("div#content_hldr").offset().left;
  
    // Define the current div.
    var Div_Rep = $(this);
  
    // Hide the More Info tab.
    $(Div_Rep).children(".more_info").fadeOut("fast");
  
    // Fade content out.
    $("div#content_hldr").fadeOut("fast");
  
    // Replace the div.
    $(Div_Rep).animate({
      top: New_Top,
      left: New_Left
    }, "slow", function() {
  
      // Load Home page in.
      $("div#content_hldr").load("content/content.projects.php?id=" + Project_Id, function() {
  
        // Re-define Cufon.
        Cufon.replace('h2');
      });
      // Fade in the content.
      $("div#content_hldr").fadeIn("fast", function() {
  
        // Hide the replaced div.
        $(Div_Rep).hide();
  
        // Replace it back to its position.
        $(Div_Rep).css({
          top: Ori_Top,
          left: Ori_Left
        });
  
        // Show the More Info tab again.
        $(Div_Rep).children(".more_info").show();
  
        // Fade back in.
        $(Div_Rep).fadeIn("medium");
      });
    });
  });
  </code></pre>