2010-03-29 8 views
3

J'ai une info-bulle CSS, avec CSS3 fondu, avec z-index mis à 999. Lorsque je survole le lien, l'info-bulle elle-même pousse mon autre contenu, il est censé être au-dessus, pas en ligne, même si j'ai utilisé un span et le convertir en bloc ..Pourquoi mon info-bulle CSS fait-elle baisser mon autre contenu?

Here est un exemple de ce que je vais faire, comment puis-je l'empêcher de pousser le contenu vers le bas?

Merci.

Répondre

3

Display:block ne supprime pas un élément du flux de la page, il le pousse simplement sur sa propre ligne. En utilisant position:absolute - comme recommandé par d'autres affiches - devrait travailler pour vous. Position:absolute définira une position (telle que top:0px; left:20px;) dans la fenêtre du navigateur en général, sauf s'il existe un parent avec position:relative défini (qui deviendra alors le point de référence). Un exemple de ce second type serait de positionner un lien exactement 30px à partir de la droite dans une div de contenu donné - indépendamment de l'endroit où ce div est placé sur la page.

Position:relative peut être utilisé pour positionner un élément par rapport à sa position d'origine dans le flux de page naturel, et il laisse un espace où l'élément aurait été. Position:fixed peut être utilisé pour les éléments qui ne doivent pas bouger lors du défilement de la page (comme une barre de navigation fixe, une marque de page ou un pied de page). Position:static est le paramètre de position par défaut et doit être utilisé lorsque vous devez remplacer un autre type de position.

Si vous utilisez un span pour le texte de l'info-bulle dans un autre élément, vous souhaiterez probablement définir l'élément parent sur position:relative et définir l'intervalle interne sur position:absolute. Vous devez définir une valeur supérieure et une valeur à gauche pour ajuster l'emplacement exact de votre texte d'info-bulle (par exemple, au-dessus ou en dessous de l'élément parent, à gauche ou à droite).

J'espère que c'est utile.

+1

Très utile, réponse informative, merci. – Kyle

4

Position absolue de l'info-bulle (positionner le conteneur sur relative et la position absolue sera relative au conteneur).

+0

Cela a fonctionné, merci. – Kyle

1

Avez-vous vérifié que la position de la css de l'info-bulle est absolue? (ou du moins pas statique).