title: Z index in javascript animation?
body: <p>Having a bit of a problem with the z index of some divs in my javascript.</p>
  
  <p>I've used a bit of code from Rob White animates boxes by expanding their margins. It works great apart from the unhover part of the script.</p>
  
  <p>The <a href="http://jsfiddle.net/3Bpt6/1/fiddle" rel="nofollow">fiddle here</a> shows what happens.</p>
  
  <p>On hover the divs animate and expand and a class of <code>top</code> is added with a z-index of 9999999</p>
  
  <p>On unhover they shrink again but "pop" behind the neighbouring squares instead of remaining on top. The <code>top</code> class is removed at unhover but this has no bearing on the animation.</p>
  
  <p>It actually only seems to happen at the edges an the bottom right corner is the only one that looks natural. Any assistance would be great.</p>