Link do bezwzględnego przesunięcia obrazu - jquery, html, css

Na mojej stronie http://www.jamesarmenta.com/ , istnieje grupa obrazów, które są ustawione na position: relative; i losowo rozmieszczane wokół ekranu za pomocą JQuery. Każdy obraz jest kodowany w następujący sposób:

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

Z jakiegoś powodu ten link można kliknąć w lewym górnym rogu ekranu, nawet jeśli obraz jest umieszczony gdzie indziej.

To dzieje się tylko z tym linkiem (tapetami), który jest pierwszym obrazem w HTML. Wiesz, dlaczego to jest? Dzięki!

Odpowiedni kod:

<div id="projectWrapper">

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

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

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

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

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

Link do kodu JQuery:

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

Odpowiedzi:

1 dla odpowiedzi № 1

Patrząc na inspektora, widzę, że obraz w pierwszym linku to position:relative, co daje linkowi szerokość i wysokość, dzięki czemu można go kliknąć. Wszystkie pozostałe linki zawierają obrazy, które są position:absolute, więc te obrazy nie wpływają na wymiary ich linków nadrzędnych, które mają wymiary 0px x 0px i dlatego nie można ich połączyć

---

1 dla odpowiedzi nr 2

Kiedy sprawdzam twoją stronę, widzę, że obrazy są poprawnie umieszczone, ale tagi linków są w pierwotnej pozycji.

Więc pierwsze przypuszczenie jest takie, że przesuwasz obraz, a nie jego kontenery, linki.

W twoim JS, kiedy robisz $(".project").each(function() {...}); ale powinieneś dostać linki (rodzice obrazu).

Jeśli zamiast tego dostaniesz linki, możesz dla każdego z nich ustawić je w dowolnym miejscu, uzyskać dostęp do ich dzieci, obrazów i wykonywać na nich swoją pracę.

---

1 dla odpowiedzi nr 3

Prostym rozwiązaniem byłoby dodanie trochę css. Dodaj „wskaźnik-zdarzenia: brak;” do #projectWrapper i dodaj „pointer-events: auto;” do wszystkich zagnieżdżonych elementów.

---

1 dla odpowiedzi nr 4

Jeśli obrazy mają position: relativeoznacza to, że są one względnie odsunięte od pierwotnego położenia w obiegu dokumentów o odległości określone w top, bottom, left i right parametry Ale ich oryginalna przestrzeń jest nadal wolna w obiegu dokumentów, i właśnie tam <a> Tagi są, które w tym przypadku działają jako kontenery.

Rozwiązaniem byłoby nadanie względnej pozycji nie obrazom, ale a tagi lub ich pojemniki.

Dodanie: Lub użyj bezwzględnego pozycjonowania na łączach, które nie będą już rezerwować miejsca w obiegu dokumentów, ale nadal zakotwiczą elementy pozycjonowane bezwzględnie w elementach nadrzędnych (i ich położeniu), ale tylko wtedy, gdy rodzice są również pozycjonowani względnie lub bezwzględnie.

---