在文本前面设置图像映射

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>

为了更好的疏忽，我删除了一些元素。

这是文本层类的CSS：

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

地图的z-index为2，图像为-1

请帮助我，

哈德

Answer 1

我用不同的方法解决了我的问题。 我忽略了z-index并使用了css-property“pointer-events”并将其设置为none。

pointer-events: none;