フローティングdivは親にスティック？

Question

私はサイトの上に置かれたリンクを持っています。クリックするとDIVが表示されます。 divはの直下にと座っています。左からのリンク位置が215pxの場合、左からのDIV位置も215pxになります。 DIVの位置を決定するためにリンクの位置を追跡するにはどうすればよいでしょうか？

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

のjQuery：

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

感謝。

Answer 1

JQueryには、要素の位置を取得するための関数が組み込まれています。

は

$('#link').click(function() { 
     var link = $(this); 
     var linkOffset = link.offset(); 
     var xPos = linkOffset.left; 
     var yPos = linkOffset.top; 
     $('#float').css('display', 'block'); 
    }); 

Answer 2

最良の方法は、絶対に何かを固執する...ドキュメントに関連した位置のためOffset、またはリンク要素の位置を取得するために

例要素の親に関連した位置のためのPositionを参照してください。ページ上の何かに配置されているのは、相対配置された要素でラップすることです。

あなたはこの試すことができます：あなたは、左上、右または下を使用してラッピングのdiv（または他のラッピング要素）の隅に対​​する相対望むように、あなたはあなたの浮動要素を配置することができます

<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> 

を。

このアプローチの大きな利点は、ウィンドウサイズが変更されてもフローティングdivが常に親に結びつくことです。

Answer 3

<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>