图像超链接在 html 中不起作用答案

【问题标题】：image hyperlink not working in html图像超链接在 html 中不起作用
【发布时间】：2015-02-24 14:13:27
【问题描述】：

侧边栏上指向其他页面的常规链接正常工作，但是当我尝试在页面正文中超链接图像时，没有任何反应。一切都在同一个目录中。这与具有标题 div 和带有“display:fixed”和“z-index:1”的侧边栏的页面有什么关系吗？

#info {
  display: inline-block;
  vertical-align: top;
  width: 80%;
  height: auto;
  padding: 0em 1em 0em 1em;
  position: absolute;
  margin-top: 15em;
  margin-left: 12em;
  z-index: -1;
}
#info td {
  display: inline-block;
  padding: 0em 2em 0em 2em;
}
#info img {
  height: 15em;
  width: auto;
}
#link_title {
  font-weight: bold;
  font-size: 20px;
  text-align: center;
}

<div id="info">
  <h2> Tips & Tricks </h2>
  <table>
    <td>
      <p id="link_title">Cooking & Food Tips</p>
      <a href="tips_tricks_cooking.html">
        <img src="deceuillete_fraise.jpg" alt="strawberry" />
      </a>
    </td>

【问题讨论】：

尝试使用浏览器的开发工具查看图片是否加载完毕
可能是css问题。另一个 div 或 html 元素重叠在您的侧边栏上。

标签： html image hyperlink

【解决方案1】：

您的图片链接位于带有负 z-index 的 div 内 - 因此它不可点击。您需要从 #info 中删除负 z-index。

【讨论】：

【解决方案2】：

删除#info 中的z-index:-1 对你来说会很好用

【讨论】：

【解决方案3】：

z-index 告诉浏览器在 html 代码中层的偏好。删除 z-index 或将其放在“堆栈顺序”的较低位置，它应该可以正常工作。另外，仅供参考，您的表格缺少标签。

display:fixed 不会影响其他标签，除非此部分（上面粘贴的）在这些标签内，这将导致冲突和错误

【讨论】：