在我的网站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
答案 0 :(得分：1)
当我检查您的页面时，我可以看到图像被正确放置但链接标签处于原始位置。
所以第一个猜测是你移动图像而不是他们的容器，链接。
当你做$('.project').each(function() {...});时你的JS，但你应该得到链接（图像的父母）。
如果您获得链接，您可以为每个人定位他们想要的位置，访问他们的孩子，图像，并对他们进行工作。
答案 1 :(得分：1)
在检查器中查看我看到第一个链接中的图像是position:relative，它为链接提供了一些宽度和高度，使其可以点击。所有其他链接都包含position:absolute的图像，因此这些图像不会影响其父链接的维度，这些链接都是0px x 0px，因此无法点击
答案 2 :(得分：1)
简单的解决方案是添加一些CSS。添加＆＃34;指针事件：无;＆＃34;到#projectWrapper并添加＆＃34; pointer-events：auto;＆＃34;到它的所有嵌套元素。
答案 3 :(得分：1)
如果图片有position: relative，则意味着他们相对于文档流中的原始位置移动了top，bottom，{{1}中指定的距离}和left参数。但是他们的原始空间在文档流程中仍然是免费的，而right标签的位置在这种情况下起到容器的作用。
解决方案是给予相对位置不是图像，而是<a>标签或他们的容器。
添加：或者在链接上使用绝对定位，这不会在文档流中保留任何空间，但仍然将绝对定位的元素锚定到其父元素（及其位置），但仅当父母也是相对或绝对的。