Clic sur un élément positionné avec z-index

Bonjour à tous,

Je cherche a intégrer un habillage publicitaire sur tout mon site. Celui-ci serait placé en arrière plan du site, et cliquable, comme il est courant d'en voir sur le net.

Je suis confronté au problème du clic à travers un élément positionné en z-index et je cherche une solution élégante pour le gérer.

Voici mon code :

<div id="banner">
	<a href="#"></a>
</div>
<div id="site"></div>

#banner {
	width:100%;
	height:100%;
	position:absolute;
	z-index:-1;
}

#banner a {
	display:block;
	width:100%;
	height:100%;
	background-color:red;
}

#site {
	width:980px;
	height:980px;
	background:orange;
	margin:0 auto;
}

Le problème est qu'avec cette solution, le haut de la bannière est cliquable, mais pas les côtés, comme illustré en pièce jointe.

Idéalement, je voudrais régler ce problème via CSS, mais l'option JS est également envisageable.

Merci d'avance.

Franck.



Modifié par kyf59 (29 Nov 2012 - 09:12)

salut,

c'est le z-index:-1; qui pose problème et qui rend ton élément non cliquable (ou pas mais je suis déjà tombé sur ce problème et il me semble bien que ça venait de là. On me contredira le cas échéant).

Hello,

Le souci est que je suis obligé de l'utiliser (sinon mon habillage passe par dessus mon site).

Franck.
Modifié par kyf59 (29 Nov 2012 - 12:40)

Bonjour,

Rassures-moi : tu es bien en train d'évoquer la possibilité de ne pas cliquer sur ton site ? Et ça ne choque personne ?

Si ta publicité doit passer au-dessus du site ou en plein écran, utilises une lightbox ou une fenêtre modale.

Si ta publicité doit rester autour du site, le site reste cliquable.

@Ten: As tu bien regardé le dessin ?

La pub fait quasiment toute la page, et le site doit être centré au dessus de cette pub.

Pour que le site soit au dessus, je suis obligé d'utiliser z-index, qui désactive de fait la possibilité de cliquer sur le calque inférieur (la pub).

Mon pb est là.

Autant pour moi, ça n'est pas du tout ce que j'avais compris, sorry !

Par contre je pige pas mieux, pourquoi faire si compliqué ?

Le z-index n'interfère pas avec le clic, c'est pour une raison bien plus simple et logique que tu ne pouvais pas cliquer dessus. C'est ton z-index: -1 qui pose problème, puisque de fait ta pub est sous le body.

Avec la pub en z-index:1 et le site en z-index: 2; tu ne devrais plus avoir ce problème, je pense.