title: Z-index doesn't work with transform and animation
body: <p>I've seen a lot of such questions how to fix problem like this but I can't figure out how to fix mine. Z-index just breaks if I have <code>transform</code> on the wrapper. It works with first wrapper (in which this element inside) but not with others</p>
  
  <p>Here's working fiddle (in latest Chrome):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.root {
    --animation-delay: 150ms;
    --animation-type: cubic-bezier(.06, .67, .37, .99);
    --accent-color: hsla(210, 16%, 11%, 1);
  }
  
  @keyframes cardIn {
    0% {
      opacity: 0;
      transform: translateY(2em);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .hardware {
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(2em);
    animation: cardIn var(--animation-delay) var(--animation-type) forwards;
  }
  
  .hardwareInner {
    display: flex;
    position: relative;
  }
  
  .hardware:nth-child(1) {
    animation-delay: 0.2s;
  }
  
  .hardware:nth-child(2) {
    animation-delay: 0.4s;
  }
  
  .hardware * {
    user-select: text;
  }
  
  .model {
    flex-grow: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  
  .unavailable {
    flex-grow: 1;
    position: relative;
    z-index: 1;
  }
  
  .unavailable span {
    opacity: 0.5;
    flex-grow: initial;
  }
  
  .reasonContainer {
    transition: var(--animation-delay) all var(--animation-type);
    position: absolute;
    opacity: 1;
    z-index: 3;
    background: #fff;
    padding: 10px;
    filter: drop-shadow(rgba(0, 0, 0, 0.1) 0px 0px 5px);
    border-radius: 4px;
    max-width: 400px;
    color: var(--accent-color);
    transform: translateY(-10px);
  }
  
  .power {
    opacity: 0.65;
    white-space: nowrap;
  }
  
  .hardwares {
    margin-top: 80px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="root"&gt;
    &lt;div class="hardwares"&gt;
    
      &lt;div class="hardware"&gt;
        &lt;div class="hardwareInner"&gt;
          &lt;div class="unavailable"&gt;
            &lt;span class="model"&gt;Some china GPU&lt;/span&gt;
            &lt;!-- That's element with z-index which not working! --&gt;
            &lt;div class="reasonContainer"&gt;Your GPU vendor (China) is unsupported. If you think that is mistake, try to update your drivers&lt;/div&gt;
          &lt;/div&gt;
          &lt;span class="power"&gt;3Gb VRAM&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      
      &lt;div class="hardware"&gt;
        &lt;div class="hardwareInner"&gt;
          &lt;span class="model"&gt;NVIDIA GeForce GTX 1060 6GB&lt;/span&gt;
          &lt;span class="power"&gt;6Gb VRAM&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If i delete <code>animation</code> and <code>transform</code>, everything works just fine. Here's how it should be:</p>
  
  <p><a href="https://i.stack.imgur.com/0NK48.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0NK48.png" alt="enter image description here"></a></p>