[HTML_CSS] JQ - position() 메서드 - 부모요소 기준으로 요소 위치 반환 (= position메서드 = 포지션 메서드)

1. position() 예제 - 요소의 top, left 위치 반환
2. position() 정의
3. position() 구문
4. position() 예제 - 요소 위치를 부모요소 기준해 반환

position() 예제 - 요소의 top, left 위치 반환

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    var x = $("p").position();

    alert("Top 위치: " + x.top + " Left 위치: " + x.left);

  });

});

</script>

<p>홈짱닷컴 Homzzang.com</p>

<button>클릭</button>

 

결과보기

position() 정의

 

일치하는 첫 번재 요소의 부모요소 기준한 상대 위치 반환.

 

---

 

예제 더 보기

https://api.jquery.com/position/

 

position() 구문

 

$(selector).position()

 

---

[매개변수]

 

없음.

 

---

[반환값]

2개의 위치 속성 갖는 객체 반환.

• top 속성 - 상단 기준 (예) object.top
• left 속성 - 왼쪽 기준 (예) object.left

 

position() 예제 - 요소 위치를 부모요소 기준해 반환

 

<style>

div {border:1px solid black;padding:50px;margin:50px;}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    x = $("p").position();

    $("#top").text(x.top);

    $("#left").text(x.left);

  });

});

</script>

<div>

  <p>홈짱닷컴 Homzzang.com (<span id="top">x.top</span>, <span id="left">x.left</span>)</p>

  <button>클릭</button>

</div>

 

결과보기