title: Jquery clickable resize animation. Maximizing div over others
body: <p>I can't come up with solution to my problem. 
    So I've got cool idea to make fancy looking user panel but can't figure out how to
    make jquery work right ;). Here's the thing: </p>
  
  <pre><code>html:
  &lt;div id="content"&gt;
  &lt;div id="containerleft"&gt;
  &lt;div id="box1" class="box"&gt;&lt;/div&gt;
  &lt;div id="box2" class="box"&gt;&lt;/div&gt;
  &lt;div id="box3" class="box"&gt;&lt;/div&gt;
  &lt;div id="box4" class="box"&gt;&lt;/div&gt;
  &lt;div id="box5" class="box"&gt;&lt;/div&gt;
  &lt;div id="box6" class="box"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  JS:
  $(".box").click(function(){
  $(this).css({'position' : 'absolute'}).animate({
                  width: '100%', 
                  height : '100%'},300);
                            });
  </code></pre>
  
  <p>Here is how it work with css: 
    <a href="http://jsfiddle.net/85mJN/1/" rel="nofollow">http://jsfiddle.net/85mJN/1/</a></p>
  
  <p>What I'm trying to achieve is resize div from his position, to size of parent div, growing effect I would call.
    As you can see, after .click div is moving to the left top corner, and then its fiting to parent, also its ruing whole thing by moving other guys. I've tried to mess around with .css('z-index': '999') for animated div, but that was a miss. Main goal is to expand div from his original position, above other div's, without moving them. </p>
  
  <p>~ sandman </p>