浮动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父母？

回答

相关问题