텍스트 앞에 이미지 맵을 설정하십시오.

Question

이 이미지에 대한 img 및 이미지 맵이 있습니다.

이제 이미지 맵 뒤에 텍스트를 배치하고 css-property : z-index를 사용하여 이미지 앞에 배치하고 싶습니다.

텍스트는 여전히 클릭 할 수 있으며 이미지 맵 뒤에 있지 않습니다. 이 여기에 코드입니다 : 더 나은 감독에 대한

<div style="position:relative;"> 
     <img src="/images/bildungssystem_notext.png" alt="Bildungssystem" style="margin-top:2px;" usemap="#uebersicht"/> 
     <map name="uebersicht" id="uebersicht"> 
      <area shape="poly" coords="365,55,398,56,432,58,431,53,450,53,450,59,521,62,521,52,542,53,542,64,558,65,558,52,544,52,496,51,494,37,395,36,394,52" id="Sonderschule" alt="Sonderschule" onclick="return false;" href="#" target="_self" /> 
     </map> 
     <div class="text-layer volksschule" >Primary School (Volksschule)</div> 
    </div> 
    </div> 

, 나는 몇 가지 요소를 삭제. 지도 2의 Z- 인덱스와 제발 도와주세요 -1

이미지를 가지고

position: absolute; 
color: #fff; 
z-index: 1; 

,

베른 하르트 : 여기

텍스트 레이어 클래스의 CSS입니다

Answer 1

다른 접근 방식으로 내 문제를 해결했습니다. Z- 인덱스를 무시하고 CSS 속성 "포인터 이벤트"를 사용하고 아무 것도 설정하지 않았습니다.

pointer-events: none;