Question

我有一个位于网站顶部的链接。单击它时，将显示DIV。 div将位于LINK的正下方。如果左边的链接位置是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

将绝对定位的东西粘贴到页面上的某些东西的最好方法是用相对定位的元素包装它。

你可以试试这个：

<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也始终与父级绑定。

Answer 2

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');
    });

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>

浮动div坚持父母？

3 个答案: