移动图像后 HTML + CSS 图像链接将不起作用答案

【问题标题】：HTML + CSS Image link won't work after moving the image移动图像后 HTML + CSS 图像链接将不起作用
【发布时间】：2023-03-22 20:20:01
【问题描述】：

基本上我想将我的图像放在我的名字下（在我的网站中，位于屏幕中间）当我将图像向下移动时链接不再有效，我可以随意向左或向右移动它它有效！但上下，它不再起作用了？

HTML：

<a href="http://steamcommunity.com/id/clarkycalLad/" target="_blank">
  <div class="imgtest">
    <img src="/images/steam-icon.png" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
  </div>
</a>

CSS：

.imgtest {
  position: relative;
  left: 800px;
  top: 100px;
  border: 3px solid #73AD21;
}

【问题讨论】：

写的没有错。也许你已经把它移到下面了，现在它上面还有另一个元素？
很奇怪，因为这没有意义？我把它移到屏幕中间的正下方..
由于我们无法再看到您的网页，因此无法提供更具体的建议。
你想看看我的完整的 Html 和 Css 吗？
如果你设置一个 jsfiddle 让我们可以实际看到结果，那将是理想的。

标签： html css image hyperlink position

【解决方案1】：

我刚刚明白了：不是图像不显示；而是图像不显示。就是它不是一个链接。

你想要这个：

<div class="imgtest">
  <a href="http://steamcommunity.com/id/clarkycalLad/" target="_blank">
    <img src="/images/steam-icon.png" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
  </a>
</div>

否则，您将移动图像而不是锚点。

【讨论】：

【解决方案2】：

固定：我通过添加来修复它：

    z-index: 1;

到我的图片/链接的css部分

原来是这样

    .imgtest {
  position: relative;
  left: 800px;
  top: 100px;
  border: 3px solid #73AD21;
}

现在是：

.imgtest {
    position: relative;
    left: 800px;
    top: 100px;
    border: 3px solid #73AD21;
    z-index: 1;
}

希望这对其他人有帮助！感谢那些试图提供帮助的人！

【讨论】：