图片的 HTML 链接不起作用答案

【问题标题】：HTML link of image doesn' work图片的 HTML 链接不起作用
【发布时间】：2015-07-05 01:12:07
【问题描述】：

<div style="position:absolute; top:0; right:0">
    <a href="index.html">
        <img src="~/Content/Img/tr.png" alt="Türkçe" />
    </a>
    <a href="index_en.html">
        <img src="~/Content/Img/eng.png" alt="English" />
    </a>
</div>

我的主页中有这个 html 块。图像显示，但链接不起作用。事实上，如果我删除它开始工作的风格。我很困扰。

【问题讨论】：

能否给我们一个指向您网站的链接，好吗？很难从中看出发生了什么，但我猜你需要设置一个 z-index 值。
partymag.org
你试过我的答案了吗？我试过了，效果很好。

标签： html css image hyperlink

【解决方案1】：

某些元素与您的链接重叠，只需在您的 <div> 样式中添加 z-index: 1;，jaunt 得到答案！

<div style="z-index: 1; position:absolute; top:0; right:0">
    <a href="index.html">
        <img src="images/tr.png" alt="Türkçe">
    </a>
    <a href="index_en.html">
        <img src="images/eng.png" alt="English">
    </a>
</div>

【讨论】：

【解决方案2】：

将on-top 类添加到图像并使用下面的 CSS。

HTML：

<div style="position:absolute; top:0; right:0">
    <a href="index.html">
        <img class="on-top" src="~/Content/Img/tr.png" alt="Türkçe" />
    </a>
    <a href="index_en.html">
        <img class="on-top" src="~/Content/Img/eng.png" alt="English" />
    </a>
</div>

CSS：

.on-top {
    position: relative;
    z-index: 1;
}

【讨论】：

非常感谢老兄，我一直在努力解决这个问题。很遗憾我不能投票。对不起。

【解决方案3】：

发生的事情是您有另一个 DIV 恰好与此重叠

我会把第一行改成这样，它应该可以工作

<div style="position:absolute; top:0; right:0; z-index=1000" >

【讨论】：

我做到了，但似乎没有任何改变。
将您的代码发送给我或将其放在jsfiddle.net 上，我会尽力为您修复它。

【解决方案4】：

您需要为链接周围的div 添加一个 z-index。

现在 <div class="fp-tableCell" style="height:776px;"> 位于您遇到问题的 div 之上。

将此添加到您遇到问题的 div 中：

<div style="position:absolute; top:0; right:0; z-index:999;">

【讨论】：

是的，我是根据设计添加 999 以确保它保持在顶部
我做到了，但似乎没有任何改变。

【解决方案5】：

好的，您可以在父级div 中设置z-index:1，也可以申请

position:absolute;
top:0;
right:0;

和

position:absolute;
top:0;
right:40px;

到a 标签内的img 标签，而不是父div。我敢肯定还有其他方法，但这些似乎是最简单的。

【讨论】：