title: jQuery div animate over surrounding elements
body: <p>I am trying to show thumbnails that expand to show the full image when the container div is hovered. </p>
  
  <p>The problem I am having is that when one of them animates it pushes the elements around it. I tried absolute positioning, but that made all elements move - I want them to stay in place, but the animated element to go over the elements around it. I also tried z-index, but it did not work either. The HTML, CSS, jQuery and a link is below for your reference.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div style="width:400px;height:400px;background:red;"&gt;
      &lt;div class="imgThumb"&gt;&lt;img src='templates/temp1/thumbnail.jpg' border='0'&gt;&lt;/div&gt;
      &lt;div class="imgThumb"&gt;&lt;img src='templates/temp1/thumbnail.jpg' border='0'&gt;&lt;/div
      &lt;div class="imgThumb"&gt;&lt;img src='templates/temp1/thumbnail.jpg' border='0'&gt;&lt;/div
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.imgThumb{
      float: left;
      margin: 5px;
      width: 150px;
      height: 150px;
      overflow: hidden;
      border: 1px solid black;
      z-index: 100;
  }
  </code></pre>
  
  <p>Open and close jQuery:</p>
  
  <pre><code>$("div.imgThumb").mouseover(function () {
          var imgWidth = $(this).find("img").width();
          var imgHeight = $(this).find("img").height();
          $(this).animate({
              height: imgHeight,
              width: imgWidth,
              position: "absolute",
              zIndex: 999,
          });
      });
      $("div.imgThumb").mouseout(function () {
          $(this).stop(true).animate({
              height: "150",
              width: "150",
              position: "relative"
          });
      });
  </code></pre>
  
  <p>Thank you!</p>