떠 다니는 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 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>