在IE10中的絕對位置和z-index

一個奇怪的位，我試圖在圖像上覆蓋幾個鏈接，並且只在IE（所有版本）中顯示它們在圖像後面。適用於Chrome，Firefox等。在IE10中的絕對位置和z-index

我試過給每個元素一個適當的z-索引，但它實際上並沒有任何區別。

我發誓我已經做了這一百萬次之前的問題。

這裏有一個的jsfiddle它： 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; 
}

來源

2013-11-20 Platinumpt

我沒有看到'任何地方使用 –

@Platinumpt -Did Z-index'你注意到了」 .logo鏈接，跨度，.logo鏈接-B跨度「類」顯示：無;「。 –

不，不應該需要，但這是我測試過的。跨度被隱藏，因此文本不會出現。 – Platinumpt

什麼是隱藏在圖像鏈接的原因嗎？你可以用<a>標籤包裝的形象，創造沒有太多的標記中的鏈接，你也可以使用圖片替換帶來的也

這裏有些技巧，圖片替換頁面的SEO良好的效果：http://css-tricks.com/css-image-replacement/

這裏小提琴：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; 
}

來源

2013-11-20 13:00:33

我想在圖片上做到這一點的原因。我基本上想要重新創建一個圖像映射，如果它只是一個簡單的鏈接包裹在一個圖像像你的例子，它會很容易。 :) – Platinumpt

你可以使用圖像地圖發電機周圍的網絡 –

一個駭人的解決方案是爲<a />元素添加背景色。添加此到您的jsfiddle的CSS工作：

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

來源

2014-12-04 12:11:22

爲我工作，不能點擊絕對定位的鏈接沒有背景 – panepeter

在IE10中的絕對位置和z-index

回答

相關問題