Position absolute and z-index in IE10 - html

Question

Bit of a strange one, I'm trying to overlay a couple of links over an image, and only in IE (all versions) is it displaying them behind the image. Works in Chrome, Firefox, et al.
I've tried giving each element an appropriate z-index but it doesn't actually make any difference.
I swear I've done this a a million times before with issues.
Here's a JSFiddle for it:
http://jsfiddle.net/SY8xp/
<span>Link 1</span>
<span>Link 2</span>
<img src="http://lorempixel.com/212/43" width="212" height="43" alt="" id="logo" />
.logo-link-a span, .logo-link-b span {
display: none;
}
.logo-link-a {
display: block;
position: absolute;
width: 50px;
height: 50px;
margin: 25px 0px 0px 0px;
}
.logo-link-b {
display: block;
position: absolute;
width: 165px;
height: 50px;
margin: 25px 0px 0px 50px;
}
#logo {
margin-top: 30px;
}

Answer 1

A hackish solution is to add a background-color to the <a /> elements. Adding this to your jsfiddle's CSS worked:
.logo-link-a, logo-link-b {
background-color: rgba(255,255,255,0);
}

Answer 2

what's the reason to hide links over an image? you can wrap the image with <a> tag and create the link without much markup, you can also use image replacement that brings good results for the SEO of page also
here some tricks to image replacement: http://css-tricks.com/css-image-replacement/
here a fiddle: http://jsfiddle.net/9V5g8/1/
HTML:
<!-- option 1 -->
<img src="http://www.starbucks.com/static/images/global/logo.png" alt="">
<!-- option 2 -->
<div class="logo">
<a href="http://www.starbucks.com/">
<h1 class="img-replace">
My Logo
</h1>
</a>
</div>
CSS:
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;
}