修复了动画元素中的元素

Question

我想通过对整个页面应用叠加并使输入相对位置和Z索引高于叠加来突出显示输入。

{{1}}

如下所示：

这一切都很好，直到我给白卡一个动画。然后，固定的叠加层只覆盖卡片，而不是整个页面：

这是一个显示案例的小提琴：https://jsfiddle.net/ys5jot5s/1/

注释掉动画会使叠加位置正确。

如何让叠加层填满整个页面？ 或者我试图将叠加层扔到卡片之外，但是我似乎无法在其前面弹出输入。

Answer 1

变换属性创建一个新的局部坐标系，这意味着固定元素将固定为变换后的元素。

https://w3.org/TR/css-transforms-1/#transform-rendering

一种解决方案是移动叠加并将卡片添加到自己的叠加层中。

.container {
  padding: 2rem;
  background-color: rgb(239, 96, 48);
}

@keyframes slide-down {
  0% {
    transform: translate(0, -1rem);
  }

  100% {
    transform: translate(0, 0);
  }
}

.card {
  padding: 1rem;
  background-color: white;
  animation: slide-down 0.8s normal forwards;
  position: relative;
  z-index: 3;
}

.card::before {
    content: "";
    background: rgba(0,0,0,.5);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.is-highlighted {
  position:relative;
  z-index:2;
}

.overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1;
  
  transition: 0.8s all;
}

<div class="container">
  <div class="card">
    <textarea rows="6" placeholder="Not highlighted"></textarea>
    <textarea rows="6" class="is-highlighted" placeholder="Highlighted"></textarea>  
  </div>
  <div class="overlay"></div>  
</div>