绝对定位图像偏移的链接

Question

在我的网站http://www.jamesarmenta.com/上，有一组图像设置为position: relative;，并通过JQuery随机定位在屏幕周围。每个图像的编码如下：

<a href="/wallpapers">
    <img src="/images/wallpapers.jpg" class="project" alt="Wallpapers">
</a> 

由于某种原因，即使图像位于其他位置，此链接也可以在屏幕的左上角点击。

只有这个链接（壁纸）才会发生，这恰好是HTML中的第一个图片。知道为什么会这样吗？谢谢！

相关代码：

<div id="projectWrapper">

  <a href="/wallpapers">
    <img src="/images/wallpapers.jpg" class="project" alt="Wallpapers">
  </a>

  <a href="/selectedposters">
    <img src="/images/selectedposters.png" class="project" alt="Selected Posters">
  </a>

  <a href="/mylefthand">
    <img src="/images/mylefthand.png" class="project" alt="My Left Hand">
  </a>

  <a href="/logos">
    <img src="/images/logos.png" class="project" alt="Logos">
  </a>

  <a href="/colornames">
    <img src="/images/colornames.gif" class="project" alt="Color Names">
  </a>

链接到JQuery代码：

https://github.com/jamesarmenta/jamesarmenta.github.io/blob/master/_site/js/home.js

Answer 1

当我检查您的页面时，我可以看到图像被正确放置但链接标签处于原始位置。

所以第一个猜测是你移动图像而不是他们的容器，链接。

当你做$('.project').each(function() {...});时你的JS，但你应该得到链接（图像的父母）。

如果您获得链接，您可以为每个人定位他们想要的位置，访问他们的孩子，图像，并对他们进行工作。

Answer 2

在检查器中查看我看到第一个链接中的图像是position:relative，它为链接提供了一些宽度和高度，使其可以点击。所有其他链接都包含position:absolute的图像，因此这些图像不会影响其父链接的维度，这些链接都是0px x 0px，因此无法点击

Answer 3

简单的解决方案是添加一些CSS。添加＆＃34;指针事件：无;＆＃34;到#projectWrapper并添加＆＃34; pointer-events：auto;＆＃34;到它的所有嵌套元素。

Answer 4

如果图片有position: relative，则意味着他们相对于文档流中的原始位置移动了top，bottom，{{1}中指定的距离}和left参数。但是他们的原始空间在文档流程中仍然是免费的，而right标签的位置在这种情况下起到容器的作用。

解决方案是给予相对位置不是图像，而是<a>标签或他们的容器。

添加：或者在链接上使用绝对定位，这不会在文档流中保留任何空间，但仍然将绝对定位的元素锚定到其父元素（及其位置），但仅当父母也是相对或绝对的。