Comment positionner DIV en haut et absolu en JQuery?

Question

Quelqu'un peut-il me donner une idée de la façon dont le positionnement div fonctionne dans JQuery?

Je veux montrer un div à une position absolue et au-dessus de tout le reste? Comme dans un formulaire je veux montrer une fenêtre contextuelle d'aide à apparaître juste à côté de la zone de texte en focus (comme ils le font dans careers.stackoverflow> edit CV).

De même, quelle est la meilleure stratégie pour afficher une carte de vol stationnaire, comme lorsque dans Twitter lorsque vous passez la souris sur un avatar, une petite div apparaît avec le résumé du profil de l'utilisateur.

Merci

Answer 1

Que diriez-vous quelque chose comme ceci:

$(document).ready(function(){ 
    $('#imgLinkToolTip').mouseover(function() { 
     $('#dvLinkToolTip').css({ left: $(this).position().left - 300, top: $(this).position().top - 45 }).show(); 
    }).mouseout(function() { 
     $('#dvLinkToolTip').hide(); 
    }); 
}); 

Dans cet exemple, imgLinkToolTip est votre cible en vol stationnaire au- dvLinkTooltip est le div que vous souhaitez afficher.

Et oui, votre div aura besoin d'un ordre-z et d'une position: absolus.

Answer 2

En ce qui concerne la "carte de vol stationnaire", je conseille de regarder dans le qTip Plugin.

Answer 3

La division que vous souhaitez placer en haut nécessite un ordre-z, une position: absolu et des dimensions supérieurs.

J'ai utilisé des plugins comme qTip pour fournir la fonctionnalité que vous mentionnez dans le passé. Il y a probablement 100 autres plugins tooltip qui fonctionneraient aussi.

Answer 4

Le positionnement de la div se fait exactement comme sans javascript/jQuery. Donc, je commencerais par créer une démo HTML/CSS codée et fonctionnelle de ce que vous voulez faire. Positionnez votre contenu activé jQuery dans son propre div (absolument) positionné. Une fois que cela semble correct (en vérifiant plusieurs navigateurs, etc), alors vous pouvez simplement afficher/masquer la div, et vous n'aurez plus à vous inquiéter du positionnement personnalisé avec jQuery.

Vous pouvez également positionner le contenu activé jQuery à la volée (ainsi, le contenu n'est pas déjà chargé dans la page, etc.), vous devrez peut-être définir des styles en ligne $('#mydiv').css() , gauche, etc.)

Answer 5

Pour le positionnement

essayer avec des champs de style CSS top: 5px; gauche: px, comme vous voulez

Essayez d'utiliser FF Firebug et vérifier ce qui est vraiment passe

Essayez

position: absolute et position: relative

Pour vol stationnaire ou superposant !!

utilisation z-index et la position

Essayez diaporama Jquery, slideDown pour les effets