set a Image-map for the text

Question

У меня есть img и изображение-карта для этого изображения.

Теперь я хочу поместить текст за изображение-карту, но перед изображением с помощью свойства css: 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> 

Для лучшего контроля, я удалил некоторые элементы.

Вот CSS класса текстового слоя:

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

карта имеет Z-индекс 2 и Изображение -1

Пожалуйста, помогите мне,

Bernhard

Answer 1

Я решил проблему с другим подходом. Я проигнорировал z-index и использовал css-свойство «pointer-events» и не устанавливал его в none.

pointer-events: none;