Position absolute and z-index in IE10

问题

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/

<a href="#" class="logo-link-a"><span>Link 1</span></a>
<a href="#" class="logo-link-b"><span>Link 2</span></a>
<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;
}

回答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);
}

回答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 -->
<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>

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;
}

来源：https://stackoverflow.com/questions/20096160/position-absolute-and-z-index-in-ie10

标签

html

css

z-index

internet-explorer-10