title: css z-index lost after webkit transform translate3d
body: <p>I have two absolutely positioned div elements that overlap. Both have set z-index values via css. I use the <code>translate3d</code> webkit transform to animate these elements off the screen, and then back onto the screen. After the transform, the elements no longer respect their set <code>z-index</code> values.</p>
  
  <p>Can anyone explain what happens to the z-index / stack-order of the div elements once I do a webkit transform on them? And explain what I can do to keep the stack-order of the div elements?</p>
  
  <p>Here is some more information on how I am doing the transform.</p>
  
  <p>Before the transform, each element gets these two webkit transition values set via css (I am using jQuery to do the <code>.css()</code> function calls:</p>
  
  <pre><code>element.css({ '-webkit-transition-duration': duration + 's' });
  element.css({ '-webkit-transition-property': '-webkit-transform' });
  </code></pre>
  
  <p>The element is then animated using the translate3d -webkit-transform:</p>
  
  <pre><code>element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, -1px)' });
  </code></pre>
  
  <p>Btw, I have tried setting the 3rd parameter of <code>translate3d</code> to several different values to try to replicate the stack-order in the 3d space, but to no luck.</p>
  
  <p>Also, iPhone/iPad and Android browsers are my target browser that this code needs to run on. Both support webkit transitions.</p>