CSS覆盖层动画

Question

我正在尝试使用以下HTML和CSS创建覆盖层：

我正在尝试使用以下HTML和CSS创建覆盖层

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}

div.absolute {
  position: absolute;
  top: 50%;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
  opacity: 1;
  background-color: blue;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.95);
  color: white;
  z-index: 1;
}

.div1 {
  animation: 750ms 1 forwards ani;
}

@keyframes ani {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<h2>
  position: absolute;</h2>

<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>

<div class="relative">
  This div element has position: relative;
  <div class="div1">
    This is a div
    <div class="overlay">
      This div element has position: fixed;
    </div>
  </div>

  <div class="absolute">
    This div element has position: absolute;
  </div>
</div>

我正在尝试创建一个覆盖整个区域的叠加层。但是，问题在于，当我添加动画时，即使没有将动画应用于它，它也会将绝对定位元素带到前面。

- kperveen

---

工作正常。750毫秒的持续时间意味着750毫秒。我将7500放入进行测试，可以看到动画正常工作。这只是一个动画过快的问题。 - undefined

1000毫秒 = 1秒。 - undefined

@LelioFaieta 动画没有任何问题，我面临的问题是当我将动画添加到代码中时，绝对定位的 div 出现在覆盖层的顶部。 - undefined

很不幸，这就是层叠顺序的工作方式-https://dev59.com/HFwY5IYBdhLWcg3wh4Pc - undefined

Answer 1

将您的固定元素移至底部，类似于以下内容：

将固定元素移到底部，就像这样

<div class="relative">
  This div element has position: relative;
  <div class="div1">
    This is a div
  </div>

  <div class="absolute">
    This div element has position: absolute;
  </div>
</div>
<div class="overlay">
  This div element has position: fixed;
</div>

- Erwin Sanders

---

你能解释一下吗？ - undefined

这只是一个z索引的问题。移动元素会改变元素的绘制顺序。您还可以使用相同的HTML文件，只需将绝对定位元素的z-index设置为1，如问题评论中所述。 - undefined

我无法将它移动到底部。它属于一个复杂的结构。@Cristiano，我尝试了使用绝对定位的div和z-index，但仍然没有效果。 - undefined

Answer 2

由于我上次的回答并不是最佳实践，请尝试这个解决方案。 所以将以下样式添加到具有 div1 类的 div 元素中：

.div1 {
  animation: 750ms 1 forwards ani;
  position: relative;
  z-index: 2;
}

z-index不起作用是因为绝对定位的元素与固定元素处于不同的层级上，你需要定义与其同级的元素（在这种情况下是div1和absolute）的z-index。z-index还需要具有position:relative属性才能起作用。

- Erwin Sanders

Answer 3

（给所有正在寻找答案的人）我找到了这段代码的问题所在。当我们对小于1的值应用不透明度动画时，它会为该特定元素及其子元素创建另一个层叠上下文，并且它会根据该层叠上下文进行覆盖层叠。我通过将animation-fill-mode设置为none来解决这个问题，因为它不会影响之后的任何CSS。

- kperveen