当动画运行时，CSS动画出现在顶部

我有一个css动画，当用户按下验证按钮（并且输入字段无效）时，会在窗体上方显示错误消息框。当动画运行时，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; 
}

来源

2016-05-02 Florent

的z-index是正确的设置，但你可能已经把它应用到了错误的元素。请记住，内联样式将覆盖其他样式，除非用！重要（例如'z-index：100！important'）标记，并且基于脚本的动画可能会使用内联样式。 – TheThirdMan

实际上，具有定位和z-index的操作有所帮助。

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

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

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

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

来源

2016-05-02 11:07:33

谢谢，我想我没有考虑从父母继承的绝对定位，这就是为什么z-index不起作用 – Florent

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

不知道这一点，谢谢你的加入 – Florent

当动画运行时，CSS动画出现在顶部

回答

相关问题