我想让两个图像彼此重叠,动画图像在后面,静态图像重叠。如果没有动画,红色与黑色图像重叠时效果很好。
一旦我添加了 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;
}
最佳答案
z-index
不适用于非定位元素。
我添加了 position: relative;
一切正常:http://jsfiddle.net/q9vsqpyw/
关于html - CSS 动画忽略 z-index,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25754377/