css - 动画元素内的固定元素

Question

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

.overlay {
  position: fixed;
  z-index: 1;

  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  background-color: rgba(0, 0, 0, 0.4);      
}

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

类似下面的内容:

一切正常，直到我给白卡添加动画。然后，固定覆盖仅覆盖卡片，而不是整个页面:

这是一个展示案例的 fiddle :https://jsfiddle.net/ys5jot5s/1/

注释掉动画会使叠加层本身正确定位。

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

Answer 1

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

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>