2014-09-09 7 views
0

애니메이션 이미지가 뒤쪽에 있고 정적 이미지가 겹치는 두 이미지가 서로 겹치기를 원합니다. 애니메이션이 없으면 검은 색 이미지가 겹치는 빨강 색으로 잘 작동합니다.CSS 애니메이션이 Z- 인덱스를 무시합니다.

CSS 애니메이션을 추가하자마자 Z- 색인 세트가 무시되고 검은 색이 빨간색으로 겹칩니다. 빨간 이미지를 앞에 가져 오려면 어떻게해야합니까?

나는 CSS 배경을 사용하여 작업 솔루션을 가지고 있지만 나는 이미지가 여기에

여기

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; 
} 

답변

5

z-index 아무튼 바이올린입니다 반응 할 할 비 위치 요소에 대한 작업.

내가 position: relative; 추가 한 모든 것이 잘 : 만 위치 요소 http://jsfiddle.net/q9vsqpyw/

2

z-index 작품. 즉, relative, absolutefixed을 의미합니다. static 요소에서 작동하지 않습니다. 기본적으로 요소는 position: static;입니다.

position: relative;으로 변경하면 효과가 있습니다.

관련 문제