J'ai un lien qui est placé sur un site. quand il est cliqué, un DIV sera affiché. la div se trouvera juste en dessous du LIEN. si la position du lien de gauche est 215px, la position DIV de gauche sera également 215px. Comment puis-je suivre la position du lien pour déterminer la position du DIV afin qu'il puisse s'y tenir.

<a href="link" id="link">Link</a>
<div id="float" style="display:none;">Some text</div>

JQuery:

$('#link').click(function(){
    $('#float').css('display','block');
});

Merci.

3
sm21guy 28 oct. 2011 à 11:40

3 réponses

Meilleure réponse

JQuery a intégré des fonctions pour obtenir les positions des éléments.

Voir Offset pour la position liée au document, ou Position pour la position liée au parent de l'élément

Exemple pour obtenir la position de l'élément de lien ...

    $('#link').click(function () {
        var link = $(this);
        var linkOffset = link.offset();
        var xPos = linkOffset.left;
        var yPos = linkOffset.top;
        $('#float').css('display', 'block');
    });
2
musefan 28 oct. 2011 à 07:54

La meilleure façon de coller quelque chose d'absolu positionné à quelque chose sur la page est de l'envelopper avec un élément positionné relatif.

Vous pouvez essayer ceci:

<div style="position: relative">
    <a href="link" id="link">Link</a>
    <div id="float" style="display:none; position: absolute; top: 10px; left: 0;">Some text</div>
</div>

Ensuite, vous pouvez positionner votre élément flottant comme vous le souhaitez par rapport aux coins du div enveloppant (ou autre élément enveloppant) en utilisant gauche, haut, droite ou bas.

Le sérieux avantage de cette approche est que le div flottant sera toujours lié au parent même si la taille de la fenêtre est modifiée.

5
Ivan Ivanov 28 oct. 2011 à 08:02
<style>
#float {
  display:none;
  position:absolute;
  border:1px solid red;
  padding:5px;
  margin:0;
}
</style>

<a href="#" id="link">Link</a>
<div id="float">Some text</div>
<script>
$(function() {
  $("#link").click(function() {
    $("#float")
      .css("left", $(this).offset().left)
      .css("top", $(this).offset().top + $(this).height())
      .show();
  });
});
</script>
1
starikovs 28 oct. 2011 à 08:23
7926414