Z-index sous google chrome

Bonjour a tous,

je ne suis encore qu'un jeune padawan dans l'apprentissage du coté obscur du web, donc veuillez me pardonner si mes questions vous semblent stupides.

Je fais actuellement quelques tests avec css3 et j'ai un probleme de z-index sous chrome. J'ai superposé quelques images avec un effet de perspective qui doivent se repositionner de face et s'agrandir au survol, en passant au dessus des autres. Tout ça fonctionne parfaitement sur firefox ou IE9, mais pas sous chrome.

(premier screen sous FF et deuxieme sous chrome)

Comme vous pouvez le constater, sous FF l'image de darth maul est bien au dessus des autres au survol de la souris. Par contre sous chrome, c'est le joker qui est dessus.
Et donc une question me taraude: "why so serious?"... Euh non pardon, c'est pas ça . "pourquoi ça ne marche pas sur ce navigateur?" (question que je me pose très fréquemment depuis que je me suis mis au web...) "Est-ce que c'est normal et est-ce que quelqu'un a déjà rencontré ce problème?" "c'est grave docteur?"

Bref, si quelqu'un à une explication je suis tout ouïe.

Merci d'avance pour votre aide.

Bonjour,

aelor a écrit :
je ne suis encore qu'un jeune padawan dans l'apprentissage du coté obscur du web

Euh, le côté obscure c'est pas nous.

Pour ton problème, sans code, il n'y a rien que l'on puisse faire Une page en ligne serait parfaite.

Ok donc a la demande générale de toi, voici mon code CSS.

section#art ul{
position: absolute;
top: 500px;
left: 320px;
width: 750px;
margin-left: auto;
margin-right: auto;
}

section#art ul li{
list-style: none;
float: left;
margin: 0 -20px;
}
section#art ul li a img{
z-index: 0;                                  /*    <------------z-index ici    */
width: 200px;
float: left;
border: none;
-webkit-transform: skew(0deg, -30deg);
-chrome-transform: skew(0deg, -30deg);
-moz-transform: skew(0deg, -30deg);
-ms-transform: skew(0deg, -30deg);
transform: skew(0deg, -30deg);
-webkit-box-shadow: 2px 8px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 8px 10px rgba(0, 0, 0, 0.5);
-o-box-shadow: 2px 8px 10px rgba(0, 0, 0, 0.5);
-ms-box-shadow: 2px 8px 10px rgba(0, 0, 0, 0.5);
-chrome-box-shadow: 2px 8px 10px rgba(0, 0, 0, 0.5);
box-shadow: 2px 8px 10px rgba(0, 0, 0, 0.5);
}

section#art ul li a:hover img{
z-index: 1;                                 /*   <-------------et ici;  * /
float: left;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
-chrome-transform: scale(1.5);
transform: scale(1.5);
-webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.8);
-o-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.8);
-ms-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.8);
-chrome-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.8);
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.8);
}

Avec en cadeau bonus le code html:

<section id="art">
		<ul>
			<li> <a href="#"><img src="darth.png" alt="darth-maul"> </a> </li>
			<li> <a href="#"><img src="joker_paint.png" alt="le joker"> </a> </li>
			<li> <a href="#"><img src="Marilyn_Monroe.png" alt="Marilyn"> </a> </li>
		</ul>	
	</section>

et voilou.