jQuery 공작소 : .position()

jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!

position 메소드는 지정한 요소의 부모 요소를 기준으로 top, left 위치를 알아냅니다.

예제 1
기본 예제
보기
아래 사진들을 클릭해 보세요!



소스
<style type="text/css">
    .css_test {
        margin-bottom : 30px;
    }
    .css_test img {
        cursor : pointer;
    }
    .css_test input {
        border-radius : 5px;
        border : 3px solid gray;
        color : blue;
        font-weight : bold;
        margin-top : 10px;
        padding : 7px;
        text-align : center;
        width : 300px;
    }
</style>

아래 사진들을 클릭해 보세요!<br><br>

<div class="css_test">
    <img src="https://t1.daumcdn.net/cfile/tistory/2264874654D5A16A32" onclick="j_test(this)" /><br>
    <input type="text" value="" />
</div>
<div class="css_test">
    <img src="https://t1.daumcdn.net/cfile/tistory/2776FC3354D74FB224" onclick="j_test(this)" /><br>
    <input type="text" value="" />
</div>

<script type="text/javascript">
    function j_test(o){
        var pos = $(o).position();
        $('input', $(o).parent()).val( '이미지의 position - left:' + pos.left + ', top:' + pos.top);
    }
</script>
관련 CSS
jQuery

$( 셀렉터 ).position()  -  셀렉터에 해당하는 요소의 부모를 기준으로 top, left 값을 알아냅니다.

$( 셀렉터 ).position().top  -  top 위치값 가져오기
$( 셀렉터 ).position().left  -  left 위치값 가져오기

이렇게 변수화 해서 사용하면 편합니다.
var pos = $( 셀렉터 ).position();
alert( '이미지의 position - left:' + pos.left + ', top:' + pos.top )

예제 2
부모요소의 CSS position 설정이 상대적일때는?
보기
아래 사진들을 클릭해 보세요!
부모요소인 회색 테두리의 DIV 가 CSS - position : relative 로 설정 되어있습니다.
이렇게 CSS position 의 설정이 지정되면 해당 요소의 부모를 기준으로 자신의 위치값을 가져옵니다.



소스
<style type="text/css">
    .css_test {
        border : 5px solid silver;
        margin-bottom : 30px;
        padding : 5px;
        position : relative;
    }
    .css_test img {
        cursor : pointer;
    }
    .css_test input {
        border-radius : 5px;
        border : 3px solid gray;
        color : blue;
        font-weight : bold;
        margin-top : 10px;
        padding : 7px;
        text-align : center;
        width : 300px;
    }
</style>

아래 사진들을 클릭해 보세요!<br>
부모요소인 회색 테두리의 DIV 가 CSS - position : relative 로 설정 되어있습니다.<br>
이렇게 CSS position 의 설정이 지정되면 해당 요소의 부모를 기준으로 자신의 위치값을 가져옵니다.<br><br>

<div class="css_test">
    <img src="https://t1.daumcdn.net/cfile/tistory/244ED638555ABF4509" onclick="j_test(this)" /><br>
    <input type="text" value="" />
</div>
<div class="css_test">
    <img src="https://t1.daumcdn.net/cfile/tistory/2509693354D74FB503" onclick="j_test(this)" /><br>
    <input type="text" value="" />
</div>

<script type="text/javascript">
    function j_test(o){
        var pos = $(o).position();
        $('input', $(o).parent()).val( '이미지의 position - left:' + pos.left + ', top:' + pos.top);
    }
</script>
관련 CSS
예제 3
문서를 기준으로 값 가져오기 - offset 메서드
보기
아래 사진들을 클릭해 보세요!


소스
<style type="text/css">
    .css_test {
        border : 5px solid silver;
        margin-bottom : 30px;
        padding : 5px;
        position : relative;
    }
    .css_test img {
        cursor : pointer;
    }
    .css_test input {
        border-radius : 5px;
        border : 3px solid gray;
        color : blue;
        font-weight : bold;
        margin-top : 10px;
        padding : 7px;
        text-align : center;
        width : 300px;
    }
</style>

아래 사진들을 클릭해 보세요!<br>

<div class="css_test">
    <img src="https://t1.daumcdn.net/cfile/tistory/2701603954D74FB617" onclick="j_test(this)" /><br>
    <input type="text" value="" />
</div>
<div class="css_test">
    <img src="https://t1.daumcdn.net/cfile/tistory/276CD538550B923A07" onclick="j_test(this)" /><br>
    <input type="text" value="" />
</div>

<script type="text/javascript">
    function j_test(o){
        var pos = $(o).offset(); // offset 은 문서를 기준으로 위치값을 파악합니다.
        $('input', $(o).parent()).val( '이미지의 position - left:' + pos.left + ', top:' + pos.top);
    }
</script>
관련 CSS
jQuery

- offset 메서드는 문서를 기준으로 값을 가져옵니다.

- 부모요소를 기준으로 값을 알고 싶을땐 position (상대적 위치값)
- 문서를 기준으로 값을 알고 싶을땐 offset (절대적 위치값)

+ 관련 jQuery +
jQuery 홈페이지 .position() API 문서 : https://api.jquery.com/position/