浮动div坚持父母？

Question

i have a link which is placed ontop of a site. when it is clicked , a DIV will be shown. the div will sit just below the LINK. if the link position from left is 215px , the DIV position from left will also be 215px. How can i track the position of the link to determine the position of the DIV so it could stick to it.

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

jQuery:

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

Thanks.

Answer 1

The best way to stick something absolute positioned to something on the page is to wrap it with relative positioned element.

You can try this:

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

Then you can position your floating element as you wish relative to the corners of the wrapping div (or other wrapping element) using left, top, right or bottom.

Serious advantage of that approach is that floating div will always be tied to the parent even if the window size is changed.

Answer 2

JQuery has built in functions for getting positions of elements.

See Offset for position related to document, or Position for position related to element's parent

Example to get the position of the link element...

    $('#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>