Z-index ne fonctionne pas !

Salut à tous, je suis actuellement en train de réaliser un p'tit module afin de suivre l'actualité sur un site, le problème est que je galère avec les z-index pour masquer une partie des icones afin de les faire surgir de derrière le bandeau au passage de la souris.

Voici un aperçu de ce que j'ai réalisé:
http://halo.goldzoneweb.info/probleme/index.html

Au final, j'aimerai que les icones apparaissent derrière le bandeau de cette façon (avant de les survoler avec la souris):
http://halo.goldzoneweb.info/probleme/images/idee.png

J'avais cru comprendre qu'en donnant une position, la propriété z-index fonctionnait sans soucis, mais visiblement j'ai du me gourer quelque part.

Bref, si quelqu'un pouvait me donner son avis sur ce p'tit bout de code et sur l'erreur que j'ai commis, ca serait vachement sympa parce que je suis en train de peter un cable à force de triturer le code en long et en large

le code html:

<div id="abonnements">
	<div class="abonnes">
	<h4>Souscrire à:</h4>
		<ul class="rollover">
			<li><a title="Flux RSS" href="#"><span>Flux RSS</span></a></li>
			<li class="button2"><a title="Youtube" href="#"><span>Youtube</span></a></li>
			<li class="button3"><a title="Facebook" href="#"><span>Facebook</span></a></li>
			<li class="button4"><a title="Twitter" href="#"><span>Twitter</span></a></li>
		</ul>
	</div>
</div>

et le css:

body{background-color:#151515}

#abonnements {
	position:relative;
	margin-bottom:15px;
	width: 300px;
	height:111px;
	background:url("../images/abonnement1.png") no-repeat top;
	-moz-box-shadow: 0px 4px 4px #0d0d0d; /* FF3.5+ */
  	-webkit-box-shadow: 0px 4px 4px #0d0d0d; /* Saf3.0+, Chrome */
	box-shadow: 0px 4px 4px #0d0d0d /* Opera 10.5, IE9, Chrome 10+ */}
	
.abonnes {
	position:relative;
	z-index: 3;
	width: 300px;
	height:111px;
	background:url("../images/abonnement2.png") no-repeat bottom;
	color:#c2cccf}
	
.abonnes h4{
	font-size:1.4em;
	font-weight:normal;
	text-decoration:underline;
	height:24px;
	margin:0;
	padding:10px 0 0 8px}

ul.rollover{
	position:relative;
	z-index: 2;
	list-style: none;
	margin: -5px 0 0 130px;
	padding: 0}
	
ul.rollover li{
	display: block;
	float: left;
	margin-right: 13px}
	
ul.rollover li a{ 
    display: block; 
    background: url("../images/socials.png") no-repeat scroll top left; 
	height: 29px; 
    width: 28px;
	margin-top:8px;
	-moz-transition:all 0.4s ease-out;  /* FF4+ */
       -o-transition:all 0.4s ease-out;  /* Opera 10.5+ */
  -webkit-transition:all 0.4s ease-out;  /* Saf3.2+, Chrome */
      -ms-transition:all 0.4s ease-out;  /* IE10? */
          transition:all 0.4s ease-out}
  
ul.rollover li.button2 a{ background-position:-28px 0}
ul.rollover li.button3 a{ background-position:-56px 0} 
ul.rollover li.button4 a{ background-position:-84px 0}

ul.rollover li a span{display:none}

ul.rollover li a:hover{margin-top:0}

Merci, Laurent.
Modifié par LuciferX (21 Apr 2011 - 02:10)

Salut Laurent,

Je pense que tu devrais plutôt mettre ton ul et ton h4 dans le div "abonnements" et fixer à ce dernier la hauteur de ton image de fond. Ensuite, avec les margin top et bottom du ul, tu dois pouvoir faire passer tes icônes sous le div de dessous. T'as peut-être même pas besoin d'utiliser de z-index.

Ha oui, effectivement cela fonctionne aussi comme ca

Mais ca ne me dit toujours pas pourquoi les z-index ne fonctionnaient pas ?!

Parce que ton ul aurait dû être en position absolute par rapport aux deux autres div qui auraient dû être l'un sous l'autre et non imbriqués l'un dans l'autre.

Ha ok, merci pour ta réponse.

Salut
Je crois que le z-index ne fonctionne que si tu indiques bien la hauteur et largeur des blocs sur lesquels tu appliques le z-index (à vérifier tout de même).
Sinon un pti moyen mnémotechnique en image pour se rappeler de qui est devant/derrière avec le z-index (trouvé ce soir sur le web :ici)
ça m'a fait marrer alors j'en profite, puisque c'est le sujet !

Bonjour,

petite remarque sur le z-index.

Tu n'es pas obligé de prendre des valeurs consécutives (comme 2 puis 3, ce que tu as pris) ; tu peux aussi aller de 10 en 10 par exemple.

On ne sait jamais, tu peux vouloir rajouter un intermédiaire et ça t'éviterait de remodifier tous tes z-index...

H.

essayez d'ajouter la "position" absolute ou relative comme ceci

.......
<ul style=" background: none repeat scroll 0 0 #222222; height: 40px; margin-top: 25px; position: absolute; width: 260px; z-index: 100;"> </ul>
</div>
z-index marche avec mon FF, j'ai pas testé sur IE

ClR a écrit :
Salut
Je crois que le z-index ne fonctionne que si tu indiques bien la hauteur et largeur des blocs sur lesquels tu appliques le z-index (à vérifier tout de même).

A l'occasion, faudra que je teste

ClR a écrit :
Salut
Je crois que le z-index ne fonctionne que si tu indiques bien la hauteur et largeur des blocs sur lesquels tu appliques le z-index (à vérifier tout de même).
Sinon un pti moyen mnémotechnique en image pour se rappeler de qui est devant/derrière avec le z-index (trouvé ce soir sur le web :ici)
ça m'a fait marrer alors j'en profite, puisque c'est le sujet !

lol, ca m'a bien fait marré également

HAML a écrit :
Bonjour,

petite remarque sur le z-index.

Tu n'es pas obligé de prendre des valeurs consécutives (comme 2 puis 3, ce que tu as pris) ; tu peux aussi aller de 10 en 10 par exemple.

On ne sait jamais, tu peux vouloir rajouter un intermédiaire et ça t'éviterait de remodifier tous tes z-index...

H.

Effectivement, c'est pas bête comme point de vue, j'en prend bonne note

meditation a écrit :
essayez d'ajouter la &quot;position&quot; absolute ou relative comme ceci

.......
&ul style=&quot; background: none repeat scroll 0 0 #222222; height: 40px; margin-top: 25px; position: absolute; width: 260px; z-index: 100;&quot;&gt; &lt;/ul&gt;
&lt;/div&gt;
z-index marche avec mon FF, j'ai pas testé sur IE

Si ca marche avec FF, ca doit aussi fonctionner avec IE mais la, je n'ai plus le temps de chipoter avec ca, mais a l'occasion, faudra que je re-joue avec les z-index pour effectivement vérifier si avec la hauteur/largeur déclarée ca change quelque chose.

D'autant plus que je l'avais déjà utilisé dans le cadre d'un autre projet (pour que le footer ne survole pas le contenu sur les plus petites résolutions) et à ce moment la, je n'avais rencontré (heureusement) aucun problème.
Modifié par LuciferX (30 Apr 2011 - 01:20)

http://meiser-testtesttest.blogspot.com/

Le blog de tests ci-dessus utilise un nouveau template de Blogger.

La barre déroulante fonctionne parfaitement avec Firefox mais les sous-menus passent en arrière-plan avec Internet Explorer malgré l'utilisation de z-index.

Avez-vous une solution ?

Bonjour arthurblogger,

Merci de bien vouloir créer ton propre sujet.