Problème de superposition
Bonjour,
Je suis entrain de réaliser un système d'infobulle en css. Certains mots des textes de mon site doivent avoir une définition affiché.
J'ai déjà un résultat correct mais avec deux soucis.
Quand je passe sur un mot a définition, j'ai bien une infobulle, mais celle est passe en "dessous" des autres mots a définition.
Mon texte est compris dans un div avec un overflow, pour simuler une frame avec une barre de défilement, mais quand mon infobulle est sur le bord, elle passe de nouveau en "dessous" et elle est tronquée.
La portion de code ci-dessous illustre bien mon problème (surtout sous ie, mais mon code complet me fait également le problème sous firefox)
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <style>
a.info {
position: relative;
text-decoration: none;
color : #600000;
cursor : default;
}
a:hover.info {
text-decoration: none;
}
a.info span {display: none;}
a:hover.info span {
display: inline;
position: absolute;
top: 1.5em;
left: 0.5em;
z-index: 20;
background: #c3a67a;
color: #000000;
border: 1px solid #000000;
width: 150px;
text-align: left;
font-weight: normal;
font-size: 12px;
line-height: 12px;
padding: 2px 4px;
}
</style>
<div style="overflow:auto; width='200px'; height='300px'; background: #c3a67a;" >
Je fais un test <a href="javascript:;" class="info">de lien<span><b>Telat</b> : On connaît plus communément le telat sous le nom de "<i>champignon d'un jour</i>", dénomination faisant référence à sa manière de pousser. L'on dira usuellement qu'on ne "cueille" pas le telat mais qu'on le "chasse", car il pousse si vite qu'un champ parfaitement vide la veille peut être couvert de telat parfaitement matures le lendemain matin.</span></a> pom pom pom.<br >
Je fais un test <a href="javascript:;" class="info">de lien<span><b>Telat</b> : On connaît plus communément le telat sous le nom de "<i>champignon d'un jour</i>", dénomination faisant référence à sa manière de pousser. L'on dira usuellement qu'on ne "cueille" pas le telat mais qu'on le "chasse", car il pousse si vite qu'un champ parfaitement vide la veille peut être couvert de telat parfaitement matures le lendemain matin.</span></a> pom pom pom.<br >
</div> |
J'ai essayé de jouer sans succés avec des "z-index" et autres "float" "position:absolute/relative" ... mais rien n'y fait.
Si quelqu'un a une solution... Merci d'avance !
Si quelqu'un a une idée pour me sortir de là...
