CSS动画忽略z-index

Question

我希望两个图像相互重叠,背面的动画图像和静态图像重叠.没有动画,它可以正常工作,红色与黑色图像重叠.

一旦我添加了css动画,它就会忽略z-index集,黑色与红色重叠.如何将红色图像置于正面？

我有一个使用CSS背景的工作解决方案,但我希望图像能够响应

这是一个小提琴

http://jsfiddle.net/52VtD/7992/

在这里

.rotate{
z-index: 1;
-webkit-animation:rotation 20s linear infinite;
-o-animation:rotation 20s infinite linear;
-moz-animation:rotation 20s infinite linear;
animation:rotation 20s infinite linear;overflow:visible;}
@keyframes  rotation{0%{}100%{transform:rotate(-360deg);}}@-moz-keyframes  rotation
{
0%   {}
100% {transform: rotate(-360deg);}}
@-webkit-keyframes  rotation 
{
0%   {}
100% {-webkit-transform: rotate(-360deg);}
}
@-o-keyframes  rotation
{
0%   {}
100% {-webkit-transform: rotate(-360deg);}
}

.static {
    z-index:10;
    margin-top: -232px;
}

Answer 1

z-index 不适用于非定位元素.

我添加了position: relative;一切都很好:http://jsfiddle.net/q9vsqpyw/