setze eine Image-Map vor einen Text

Question

Ich habe eine IMG und eine Image-Map für dieses Bild.

Jetzt möchte ich den Text hinter der Image-Map aber vor dem Bild mit der CSS-Eigenschaft: Z-Index platzieren.

Der Text ist immer noch anklickbar und nicht hinter der Image-Map. Hier ist der Code:

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

Für eine bessere Kontrolle, löschte ich einige Elemente. Hier

ist die CSS der Text-Layer-Klasse:

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

die Karte einen Z-Index von 2 hat und das Bild von -1

Bitte helfen Sie mir,

Bernhard

Answer 1

Ich löste mein Problem mit einem anderen Ansatz. Ich ignorierte den Z-Index und verwendete die CSS-Eigenschaft "pointer-events" und setzte sie auf none.

pointer-events: none;