title: How to place one element exactly to the same visible position, as another?
body: <p>I have two elements "src" and "dest"</p>
  
  <p>"src" and "dest" are in different DOM-nodes, that can not have the same parent.</p>
  
  <p>I need to place "src" element in the same visible position, as "dest".</p>
  
  <p>"src" element must also have the same sizes, as "dest".</p>
  
  <p>I have following code for case, when "src" and "dest" having the same parent:    </p>
  
  <pre><code>src.css("position", "absolute");
  src.css("top", dest.offset().top);
  src.css("left", dest.offset().left);
  src.width(dest.width());
  
  // Show "src" element, instead of "dest". "src" must be in the same visible position, as "dest"
  dest.css("opacity", 0);
  src.show();
  </code></pre>
  
  <p>Unfortunately, it does not works. "src" element has displacement to bottom and left, for that i cannot find the reason.</p>
  
  <p>Maybe, i do something wrong ...</p>
  
  <p>How to do it right for two cases ?</p>
  
  <ol>
  <li>"src" and "dest" having the same grand-parent</li>
  <li>"src" and "dest" does't having the same parent. Maybe grand-grand-grand-parent is the common for both.</li>
  </ol>
  
  <hr>
  
  <p>Update:</p>
  
  <p>I have arranged a simple HMTL document, that does a simple visual swapping of one element with another:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;title&gt;MacBlog&lt;/title&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" charset="utf-8"&gt;&lt;/script&gt;
      &lt;style type="text/css" media="screen"&gt;
          .dest {
              background-color: #0cf;
              width: 480px;
              height: 320px;
          }
          .src {
              background-color: #09c;
              width: 1024px;
              height: 768px;
          }
      &lt;/style&gt;
      &lt;script type="text/javascript" charset="utf-8"&gt;
          jQuery(function($){
              // Common items, to deal with
              var src = $(".src");
              var dest = $(".dest");
              // Setup
              src.hide();
              // Interaction
              dest.click(function(){
                  src.width(dest.width());
                  src.height(dest.height());
                  src.offset(dest.offset());
  
                  dest.hide();
                  src.show();
              });
  
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div&gt;
          &lt;!--On clicking, this element should visually be swapped by ".src" element --&gt;
          &lt;div class="dest"&gt;&lt;p&gt;dest&lt;/p&gt;&lt;/div&gt;
          &lt;div class="src"&gt;&lt;p&gt;src&lt;/p&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It does not work correctly. After "swapping", "src" element has a strange displacement to top-left direction on ~30 pixels.</p>
  
  <p>I use latest version of Safari 5, if i makes sense.</p>
  
  <hr>
  
  <p>Update 2:</p>
  
  <p>Unfortunately, this also does not works. I updated my example:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;title&gt;MacBlog&lt;/title&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" charset="utf-8"&gt;&lt;/script&gt;
      &lt;style type="text/css" media="screen"&gt;
          div {
              margin: 0;
              padding: 0;
          }
          .holder {
              position: relative;
              top: 40pt;
              left: 40pt;
              border: black solid thin;
          }
          .dest {
              background-color: #0cf;
              width: 480px;
              height: 320px;
          }
          .src {
              background-color: #09c;
              width: 1024px;
              height: 768px;
          }
      &lt;/style&gt;
      &lt;script type="text/javascript" charset="utf-8"&gt;
          jQuery(function($){
              // Common items, to deal with
              var src = $(".src");
              var dest = $(".dest");
              // Setup
              src.hide();
              // Interaction
              dest.click(function(){
                  src.css("position", "absolute");
                  src.width(dest.width());
                  src.height(dest.height());
                  src.offset(dest.offset());
  
                  dest.hide();
                  src.show();
              });
  
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="holder"&gt;
          &lt;!--On clicking, this element should visually be swapped by ".src" element --&gt;
          &lt;div class="dest"&gt;&lt;p&gt;dest&lt;/p&gt;&lt;/div&gt;
          &lt;div class="src"&gt;&lt;p&gt;src&lt;/p&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>