Z-index不适用于变换和动画

Question

我已经看到很多这样的问题如何解决这样的问题，但我无法弄清楚如何解决我的问题。如果我在包装器上有transform，Z-index就会中断。它适用于第一个包装器（其中包含此元素）但不与其他包装器一起使用

这里的工作小提琴（在最新的Chrome中）：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<div class="root">
  <div class="hardwares">
  
    <div class="hardware">
      <div class="hardwareInner">
        <div class="unavailable">
          <span class="model">Some china GPU</span>
          <!-- That's element with z-index which not working! -->
          <div class="reasonContainer">Your GPU vendor (China) is unsupported. If you think that is mistake, try to update your drivers</div>
        </div>
        <span class="power">3Gb VRAM</span>
      </div>
    </div>
    
    <div class="hardware">
      <div class="hardwareInner">
        <span class="model">NVIDIA GeForce GTX 1060 6GB</span>
        <span class="power">6Gb VRAM</span>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果我删除animation和transform，一切正常。这是应该如何：

Answer 1

与变换混淆（据我所知）与各种页面元素的堆叠顺序相混淆。为了保留一个尊重z-index的三维堆栈，请尝试将其添加到包装器中：

transform-style: preserve-3d;

如果这不起作用，您可能必须使用“translate-z”属性来代替z索引。