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/25150D38550B923D32" onclick="j_test(this)" /><br>
<input type="text" value="" />
</div>
<div class="css_test">
<img src="https://t1.daumcdn.net/cfile/tistory/244ED638555ABF4509" 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_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/25150D38550B923D32" onclick="j_test(this)" /><br>
<input type="text" value="" />
</div>
<div class="css_test">
<img src="https://t1.daumcdn.net/cfile/tistory/244ED638555ABF4509" 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 의 설정이 지정되면 해당 요소의 부모를 기준으로 자신의 위치값을 가져옵니다.
부모요소인 회색 테두리의 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/27210A38555ABF4229" onclick="j_test(this)" /><br>
<input type="text" value="" />
</div>
<div class="css_test">
<img src="https://t1.daumcdn.net/cfile/tistory/261FC83454D7331705" 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_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/27210A38555ABF4229" onclick="j_test(this)" /><br>
<input type="text" value="" />
</div>
<div class="css_test">
<img src="https://t1.daumcdn.net/cfile/tistory/261FC83454D7331705" 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/232E7438555ABF4020" onclick="j_test(this)" /><br>
<input type="text" value="" />
</div>
<div class="css_test">
<img src="https://t1.daumcdn.net/cfile/tistory/262B5A4854D7351402" 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_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/232E7438555ABF4020" onclick="j_test(this)" /><br>
<input type="text" value="" />
</div>
<div class="css_test">
<img src="https://t1.daumcdn.net/cfile/tistory/262B5A4854D7351402" 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/