html - CSS 动画忽略 z-index

Question

我想让两个图像彼此重叠，动画图像在后面，静态图像重叠。如果没有动画，红色与黑色图像重叠时效果很好。

一旦我添加了 css 动画，它就会忽略 z-index 集并且黑色与红色重叠。如何将红色图像置于最前面？

我有一个使用 css 背景的可行解决方案，但我希望图像能够响应

这是一个 fiddle

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

这里是CSS

.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/