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/

Answer 2

z-index仅适用于定位元素。这意味着relative，absolute和fixed。不适用于static元素。默认情况下，元素包含position: static;。

将其更改为position: relative;，它会起作用。