set an Image-map in front of a text

Question

I have an img and an image-map for this image.

Now i want to place the text behind the Image-map but in Front of the Image with the css-property: z-index.

The Text is still clickable and not behind the Image-map. Here is the 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>

For a better oversight, I deleted some elements.

Here is the CSS of the text-layer class:

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

the map has a z-index of 2 and the Image of -1

Please help me,

Bernhard

Answer 1

I solved my Problem with a different approach. I ignored the z-index and used the css-property "pointer-events" and set it to none.

pointer-events: none;