动画运行时 CSS 动画显示在顶部

Posted 2023-03-06

【中文标题】动画运行时 CSS 动画显示在顶部

【英文标题】：CSS animation appears on top while animation is running

【发布时间】：2016-08-27 02:48:15

【问题描述】：

我有一个 css 动画，当用户按下验证按钮（并且输入字段无效）时，会在表单上方显示一个错误消息框。

我遇到的问题是在动画运行时，消息框出现在表单顶部。动画完成后，消息框按预期位于下方。

如何使动画在其他 DIV 下方运行？我尝试更改 z-index 没有任何成功。

见小提琴：https://jsfiddle.net/FlorentM/zhp9qb8z/15/

#requestQuoteBox .alert.ng-hide-remove 
  transition: 5000ms cubic-bezier(0.250, 0.100, 0.250, 1.000) all;


#requestQuoteBox .alert.ng-hide 
  opacity: 0;
  margin-bottom: -50px;

【问题讨论】：

z-index 是正确的设置，但您可能将其应用于错误的元素。请记住，除非标有 !important（例如 z-index: 100 !important），否则内联样式将覆盖其他样式，并且基于脚本的动画可能会使用内联样式。

【参考方案1】：

实际上，使用定位和 z-index 进行操作应该会有所帮助。

#requestQuoteBox .form-group 
  position: relative;
  z-index: 2;


#requestQuoteBox .alert 
  position: relative;
  z-index: 1;

尝试将这些属性添加到您的 CSS 中，您会看到所需的行为。

https://jsfiddle.net/mityaustinov/yzwjd8ps/2/

【讨论】：

谢谢，我想我没有考虑从父级继承的绝对定位，这就是 z-index 不起作用的原因

我认为问题不在于绝对定位的继承，而在于位置属性本身的存在。要使 z-index 正常工作，您需要首先将元素定位为绝对、固定或相对。没有它，z-index 是没用的。 developer.mozilla.org/en-US/docs/Web/CSS/z-index