키 프레임의 이미지 맵 div

Question

여러 좌표가있는 이미지 맵이 있습니다. 그러나 애니메이션이지도를 덮고 있기 때문에 위의 키 프레임 div (clouds)를 넣을 때 작동하지 않습니다. 이 마지막 div는 일부 구름이 이미지 위로 지나가는 애니메이션입니다.

HTML 코드는 다음과 같습니다

.column-right img { 
 
     min-width: 100%; 
 
     min-height: 100%; 
 
     overflow: hidden; 
 
     position: absolute; 
 
    } 
 
    .column-right .clouds { 
 
     animation: cloud-move 25s linear 2s infinite; 
 
     background-image: url("../img/sobre_mi/clouds.png"); 
 
     background-size: cover; 
 
     height: 100%; 
 
     position: absolute; 
 
     width: 100%; 
 
     z-index: 5; 
 
    } 
 
    map { 
 
     position: absolute; 
 
     z-index: 50; 
 
    }

<img src="img/sobre_mi/map.jpg" alt="Map" border="0" usemap="#Map" /> 
 
<map name="Map"> 
 
    <area shape="circle" coords="970,247,90" href="#" alt="Córdoba"> 
 
</map> 
 
<div class="clouds"></div>

내 질문은, 애니메이션 그 위에 핵 물질 동안 이미지 맵이 작동 달성 할 수있는 방법은 무엇입니까?

저는 div와 clouds 앞에 있지만 작동하지 않기 위해지도와 영역 태그에서 Z- 색인을 가지고 노는 것과 같은 몇 가지 시험을했습니다.

Answer 1

'지도'의 이미지를 z- 인덱스 0에 놓고 구름을 맨 위에 놓은 다음 이미지 맵 좌표가있는 투명한 gif/png 이미지를 절대 위치에 놓을 수 있습니까? 그래서 애니메이션은 아래에 있지만 여전히 보입니다. 그냥 생각 ...