浮動div父母？

我有一個鏈接放置在站點的頂部。當它被點擊時，會顯示一個DIV。該div將坐在的正下方的LINK。如果左邊的鏈接位置是215px，則左邊的DIV位置也是215px。我如何跟蹤鏈接的位置來確定DIV的位置，以便它可以堅持到底。浮動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'); 
});

感謝。

來源

2011-10-28 sm21guy

JQuery內置了獲取元素位置的函數。

見Offset對相關文件的位置，或Position的位置有關元素的父

實例來獲取鏈接元素的位置...

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

來源

2011-10-28 07:46:10 musefan

很酷我會檢查出來 – sm21guy

如果你然後改變窗口寬度，你會感到驚訝。 –

的最好辦法堅持絕對的東西定位到頁面上的東西是用相對定位的元素來包裝它。

你可以試試這個：

<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（或其它包裝元素）的拐角處，放置您的浮動元素使用左側，頂部，右側或底部。

該方法的一個重要優點是，即使窗口大小發生變化，浮動div也始終與父級綁定。

來源

2011-10-28 07:52:44

感謝您的幫助 – sm21guy

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

來源

2011-10-28 08:23:26 starikovs

浮動div父母？

回答

相關問題