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

Question

我见过很多这样的问题如何解决这样的问题，但我不知道如何解决我的问题。如果我在包装器上有 transform ，Z-index 就会中断。它适用于第一个包装器(其中包含此元素)但不适用于其他包装器

这是工作 fiddle (在最新的 Chrome 中):

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

<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>

如果我删除animation 和transform，一切正常。它应该是这样的:

Answer 1

搞乱转换(据我所知)搞乱了各种页面元素的堆叠顺序。为了保留尊重 z-index 的三维堆栈，请尝试将其添加到包装器中:

transform-style: preserve-3d;

如果这不起作用，您可能必须合并“translate-z”属性来代替您的 z-indexes。