Placer un "bloc" derrière un autre

[malice23]

Bonjour bonjour

Je suis actuellement en guerre contre ma page d'accueil (comme à chaque fois que je souhaite la changer), et je viens demander humblement l'aide des soldats de ForumActifs.

Voici ma situation :
J'ai déjà créé un bloc principal, avec quelques infos. Ce que je souhaite faire, c'est ajouter sur le côté droit de ce bloc les boutons de mes partenaires, à moitié cachés par ce bloc principal, qui se décalent sur la droite pour se montrer au passage de la souris.
J'ai déjà les codes pour faire décaler les boutons, là n'est pas le problème.
Ce que je cherche c'est comme faire passer mon bloc partenaires derrière le bloc principal. J'ai pour le moment un bloc qui passe devant.


J'ai déjà essayé la propriété z-index pour faire passer derrière, impossible de la faire fonctionner.

L'un d'entre vous peut-il m'aider ?

Mon forum de tests.

Edit : Après reflexion, je pense que mon deuxième soucis est du même acabit.
Je cherche à placer un texte derrière l'image qui se décale pour laisser place au vide (pour le moment) mais je ne sais pas comment m'y prendre. Une petite idée ?
HTML

Code:

<table cellpadding="0" cellspacing="0" border="none" style="width: 400px; "><tr>
   <td style="max-width:200px; height:60px; white-space: nowrap; overflow:hidden;">
      <img src="http://i.imgur.com/3RLYc.png" id="Staff_Gauche" style="float:center;" align="right" />
   </td>
   <td align="right" style="max-width:200px; height:60px; white-space: nowrap; overflow:hidden;">
      <img src="http://i.imgur.com/cP9S3.png" id="Staff_Droite" style="float:center;" align="left" />
   </td>
</tr></table>

CSS

Code:

#Staff_Droite {
  top: 0px;
  margin-left: 0px;
  transition: margin-left;
    -webkit-transition: margin-left;
    -moz-transition: margin-left;
    -ms-transition: margin-left;
    -o-transition: margin-left;
  transition-duration: 1s;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
}

#Staff_Droite:hover {
  top: 0px;
  margin-left: 190px;
}

#Staff_Gauche {
  top: 0px;
  margin-left: 0px;
  transition: margin-left;
    -webkit-transition: margin-left;
    -moz-transition: margin-left;
    -ms-transition: margin-left;
    -o-transition: margin-left;
  transition-duration: 1s;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
}

#Staff_Gauche:hover {
  top: 0px;
  margin-left: -190px;
}

Edit 2 : Désolée, c'est bon, j'ai résolu mon problème toute seule. Juste un problème avec la propriété "position". Il fait mettre "relative" et non "static".
Il me reste tout de même mon second problème : comment mettre un texte derrière mon image ? :

Même si cela paraît évident, ces codes ne sont pas là pour être repris pour vos forums. J'ai mis beaucoup de temps à me renseigner et à faire fonctionner ces codes, alors s'il vous plait, respectez mon travail.

[NatureSauvage]

Bonjour =)

Donc pour le deuxième problème, avec le texte derrière les images.
Prenons l'exemple de celle de droite, ce sera pareil pour la gauche.
Ligne 6, il faut que tu rajoutes avant l'image :

Code:

<span class="ce_que_tu_veux">Ton texte</span>

Dans le CSS :

Code:

.ce_que_tu_veux {
position: relative;
z-index: 1;
}

#Staff_Droite {
position: relative;
z-index: 2;
margin-left: - largeur_de_ton_span px;

  top: 0px;
  margin-left: 0px;
  transition: margin-left;
    -webkit-transition: margin-left;
    -moz-transition: margin-left;
    -ms-transition: margin-left;
    -o-transition: margin-left;
  transition-duration: 1s;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
}

Normalement ça devrait aller. =)

Ou alors, peut-être plus simple :
Tu donnes une id à ton td ligne 5 - pareil mais pas la même id pour l'autre td.
Puis, avant l'image, ligne 6, tu rajoutes un span ainsi :

Code:

<span>Ton texte</span> <img src="http://i.imgur.com/cP9S3.png" id="Staff_Droite" style="float:center;" align="left" />

Dans le CSS :

Code:

#id_du_td span {
display: none;
}

#id_du_td:hover #Staff_Droite {
top: 0px;
  margin-left: 190px;
}

#id_du_td:hover span {
display: inline;
}

Il me semble que c'est correct. =)

[malice23]

Bonjour =) Merci de votre réponse !!

J'ai essayé ce que vous m'avez proposé, mais ça n'a pas marché. J'ai quand même essayé d'arranger un peu, et je suis finalement arrivée mes fins ♥
Bon, faut dire que j'ai pas mal bidouillé, mais tant que ça marche !
Pour le code HTML :

Code:

<table><tr>
   <td style="max-width:200px; max-height:60px; white-space: nowrap; overflow:hidden;" align="right">
      <div class="slide_D">
         <div class="slide_texte" >Texte à insérer sur la personne</div>
         <img src="http://i.imgur.com/cP9S3.png" style="float:center;" align="right" />
      </div>
   </td>
</tr></table>

Pour le CSS :

Code:

.slide_texte {
position: relative;
z-index: 1;
width: 200px; height: 60px;
font-size: 10px; text-align: center; texte-transform: lowercase; font-family: georgia; font-style: italic;
}

.slide_G img{
position: relative;
z-index: 2;
    margin-top: -60px; 
    top: 0px;
    right: 0px;
    transition: right 1500ms ease-in-out;
      -webkit-transition: right 1500ms ease;
      -moz-transition: right 1500ms ease;
      -ms-transition: right 1500ms ease;
      -o-transition: right 1500ms ease;
}

.slide_G img:hover {
  right: 210px;
}

.slide_D img{
  position: relative;
  z-index: 2;
  margin-top: -60px;
  top: 0px;
  left: 0px;
transition: left 3s ease-in-out;
-webkit-transition: left 1500ms ease;
-moz-transition: left 1500ms ease;
-ms-transition: left 1500ms ease;
-o-transition: left 1500ms ease;
}

.slide_D img:hover {
  left: 210px;
}

En tout cas, merci beaucoup, vous m'avez mise sur la voie
Problème résolu.