Html 在IE10中定位绝对和z指数

有点奇怪，我试图在一个图像上覆盖几个链接，只有在IE（所有版本）中，它才会在图像后面显示它们。适用于Chrome、Firefox等浏览器

我试着给每个元素一个合适的z索引，但实际上没有任何区别

我发誓我以前在问题上做过一百万次

这里有一个JSFIDLE：

.logo-link-a span、.logo-link-b span{
显示：无；
}
.logo-link-a{
显示：块；
位置：绝对位置；
宽度：50px；
高度：50px；
保证金：25px 0px 0px 0px；
}
.logo-link-b{
显示：块；
位置：绝对位置；
宽度：165px；
高度：50px；
利润率：25px 0px 0px 50px；
}
#标志{
边缘顶部：30px；
}

隐藏图像链接的原因是什么？您可以使用

这里有一把小提琴：

HTML:

黑客的解决方案是为
元素添加背景色。将此添加到JSFIDLE的CSS中起到了作用：

.logo-link-a, logo-link-b {
    background-color: rgba(255,255,255,0);
}

我看不到使用了
z-index
anywhere@Platinumpt-您是否注意到“.logo-link-a span、.logo-link-b span”类“显示：无；”。不，应该不需要，但我已经测试过了。跨距是隐藏的，这样文本就不会出现。即z顺序可能有点奇怪。对于每个
位置：绝对
元素，使用
z-index
可能会有所帮助
z-index:1
用于最底部，然后
z-index:2
用于在上面放置元素，依此类推。我想在图像上这样做是有原因的。我基本上想重新创建一个imagemap，如果它只是一个简单的链接，像你的例子一样围绕着一个图像，那就很容易了。：）你可以使用图像地图生成器在网站周围为我工作，不能点击绝对定位链接没有背景
<!-- option 1 -->
<a href="http://www.starbucks.com/"><img src="http://www.starbucks.com/static/images/global/logo.png" alt=""></a>

    <!-- option 2 -->
<div class="logo">
    <a href="http://www.starbucks.com/">
    <h1 class="img-replace">
      My Logo
    </h1>
    </a>
</div>

h1.img-replace {
  width: 85px; 
  height: 84px;
  background: url("http://www.starbucks.com/static/images/global/logo.png") no-repeat 0% 50%;
  text-indent: -9999px;
}

.logo-link-a, logo-link-b {
    background-color: rgba(255,255,255,0);
}