title: Why "z-index" does not work for element having transform: translateY()
body: <p>Below is the snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.up {
    background-color: red;
    height: 100px;
    z-index: 100;
  }
  .down {
    background-color: yellow;
    height: 100px;
    width: 50%;
    margin: 0 auto;
    z-index: 1;
    transform: translateY(-50%);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="up"&gt;&lt;/div&gt;
  &lt;div class="down"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As can be seen, the <code>.up</code> element has higher <code>z-index</code> than <code>.down</code> element. However, the <code>.down</code> element still locates in front of the <code>.up</code> element somehow..</p>
  
  <p>Does anyone have ideas about this? How to fix this?</p>