絶対位置の画像オフセットのリンク

Question

私のサイトでは、http://www.jamesarmenta.com/には、position: relative;に設定され、JQuery経由で画面の周りにランダムに配置された画像のグループがあります。このリンクは、画像を他の場所に配置しても、画面の左上にクリック可能であるいくつかの理由

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

：各画像はそうのように符号化されます。

このリンク（壁紙）は、HTML内の最初の画像であるでのみ発生します。これがなぜなのか？ありがとう！

関連するコード：jQueryのコードに

<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> 

リンク：

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

Answer 1

インスペクタを見ると、最初のリンクの画像はposition:relativeであることがわかります。これはリンクに幅と高さを与え、クリック可能にします。他のすべてのリンクにはposition:absoluteの画像が含まれているため、これらの画像は親リンクのサイズには影響しません.0px x 0pxなのでunclickableです。

Answer 2

私はあなたのページを検査するとき、私は画像が正しく配置されていることがわかりますが、リンクタグが彼らの中にあります元の位置。

最初に推測するのは、あなたのコンテナではなく画像を移動することです。

あなたのJSでは、あなたの作業は$('.project').each(function() {...});ですが、リンク（画像の親）を取得する必要があります。

あなたがリンクを手に入れたら、それぞれのために、自分の好きな場所に配置し、子供の写真や画像にアクセスしたり、自分の仕事をすることができます。

Answer 3

シンプルな解決策はいくつかのCSSを追加することです。 "pointer-events：none;"を追加します。 #projectWrapperに追加し、 "pointer-events：auto;"を追加します。すべてのネストされた要素に渡します。

Answer 4

画像がposition: relativeを持っている場合、それは彼らがrelativley top、bottom、leftとrightパラメータで指定された距離だけ離れたドキュメントフローで元の位置から移動していることを意味します。しかし、元のスペースはドキュメントフローではまだ空いており、その場合は<a>タグがあり、この場合はコンテナとして機能します。

解決策は、画像ではなく、aタグ、またはのコンテナに相対位置を与えることです。

追加：リンク上で絶対位置指定を使用してください。ドキュメントフローではそれ以上スペースを予約しませんが、親要素（およびその位置）に絶対配置された要素を固定します相対的または絶対的に位置付けられる。