Bonjour,
Je n'ai pas compris la nécessité de superposer des blocs, mais je te propose d'essayer ça.
Une page contenant un bloc principal (conteneur) positionné en relative pour que les éléments qu'il contiendra le prenne comme référence.
Dans ce bloc conteneur, 2 autres blocs positionnés en absolute.
Le 1er (blocdroit), ne contient rien. Il est juste là pour matérialiser la zone où le texte apparaitra. Il est placé en premier pour rester en-dessous de l'autre, pour que les span de l'autre soient visibles par dessus.
Le 2e (blocgauche) contient un texte.
Dans ce texte, des <a> qui contiennent des <span> qui sont masquées (display : none;) par défaut. Elles n'affichent le texte qu'elles contiennent que lors du survol de la souris (pas besoin de clic). Elles s'affichent (display: inline;) sur la partie de droite par un positionnement en absolute plus grand que la width du blocgauche. Lorsque la souris sort de la zone, elles se “désaffichent”, se masquent à nouveau.
Tu peux te rendre compte (à tester dans IE) de l'effet
dans cette page.
C'est fait uniquement à l'aide de CSS, sans Javascript.
+ La superposition de blocs en CSS se fait avec
z-index.
