Discussion :

[MicaelFelix]

Bonjour,

J'ai une question relativement simple, comment pouvoir cliquer sur le premier lien en bas des onglets à gauche (Home) de cette page:
http://www.birdsevolutionpro.com/Buy.aspx

En fait, le DIV d'en dessous est en position:relative pour le faire "sortir".

En simplifié ça donne ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div><a href="lien1.html">Mon lien</a></div>
<div style="position:absolute"> <div style="position:relative; top:-20px; left:-20px;"> <img src="" style="width:200px; height:200px;" /></div></div>

Seulement tous les objets qui contiennent des liens sont ignorés car le calque décalé "capte" tous les clics en se mettant par dessus.

Le comportement désiré est simple: pouvoir cliquer même si un div est par dessus en position:relative.


La seule solution probable que je vois c'est de faire un code javascript qui renvoie le clic en dessous (je ne sais pas si ça se fait)... mais bon ce n'est pas l'idéal.

[Bisûnûrs]

Ce n'est juste pas possible. Pour pouvoir cliquer sur un élément il faut qu'il soit au-dessus.

[ornitho13]

tu peux peut être jouer avec le z-index sur la première div...

Mais la vrai question c'est pourquoi mettre une div par dessus?

[w3ar3dus1]

Par défaut tout les éléments ont un z-index: 0, donc :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div><a href="lien1.html">Mon lien</a></div>
<div style="position:absolute"> <div style="position:relative; top:-20px; left:-20px;z-index:-1;"> <img src="" style="width:200px; height:200px;" /></div></div>

Et voila.

[MicaelFelix]

En s'inspirant du post de w3ar3dus1:
- forcer le z-index de 0 pour l'image décalée
- mettre le lien en position:relative + z-index:2
Et hop, les liens passent par dessus même s'ils ne sont pas cachés par l'élément du dessous ça marche quand même.

La raison de décaler l'élément du dessous est principalement liée au design: si tu veux que ton élément "ressorte" de la page, il faut parfois jouer sur les absolute + relatif.