position()/offset()
요소 위치 메서드에는 position()메서드와 offset()메서드가 있습니다.position()메서드는 포지션 기준이 되는 요소를 기준으로 선택한 요소에서 가로/세로 로 떨어진 위치의 좌푯값을 반환하거나 변경할 때 사용합니다. offset()메서드는 문서를 기준으로 선택한 요소의 가로/세로로 떨어진 위치의 좌푯값을 반환하거나 변경할 때 사용합니다.
$("선택자").position().left; $("선택자").position().right; $("선택자").position().top; $("선택자").position().bottom;
$("선택자").offset().left; $("선택자").offset().top;
230p 그림삽입
위치 구하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery</title>
<style>
div {line-height: 40px; text-align: center; background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);}
.circle1 {position: absolute; left: 100px; top: 400px; width: 40px; height: 40px; border-radius: 50%;}
.circle2 {position: absolute; right: 100px; bottom: 400px; width: 40px; height: 40px; border-radius: 50%;}
</style>
</head>
<body>
<div class="circle1">1</div>
<div class="circle2">2</div>
<button class="btn1">circle1</button>
<button class="btn2">circle2</button>
<ul>
<li><span>position().left : </span><span class="pl">0</span></li>
<li><span>position().top : </span><span class="pt">0</span></li>
<li><span>position().bottom : </span><span class="pb">0</span></li>
<li><span>position().right : </span><span class="pr">0</span></li>
<li><span>offset().left : </span><span class="ol">0</span></li>
<li><span>offset().top : </span><span class="ot">0</span></li>
<li><span>width() : </span><span class="wd">0</span></li>
<li><span>height() : </span><span class="hg">0</span></li>
</ul>
<!-- script -->
<script src="jquery.min_1.12.4.js"></script>
<script>
$(".btn1").click(function(){
const pl = $(".circle1").position().left;
const pt = $(".circle1").position().top;
const pb = $(".circle1").position().bottom;
const pr = $(".circle1").position().right;
const ol = $(".circle1").position().left;
const ot = $(".circle1").position().top;
const wd = $(".circle1").width();
const hg = $(".circle1").height();
$(".pl").text(pl);
$(".pt").text(pt);
$(".pb").text(pb);
$(".pr").text(pr);
$(".ol").text(ol);
$(".ot").text(ot);
$(".wd").text(wd);
$(".hg").text(hg);
});
$(".btn2").click(function(){
const pl = $(".circle2").position().left;
const pt = $(".circle2").position().top;
const pb = $(".circle2").position().bottom;
const pr = $(".circle2").position().right;
const ol = $(".circle2").position().left;
const ot = $(".circle2").position().top;
const wd = $(".circle2").width();
const hg = $(".circle2").height();
$(".pl").text(pl);
$(".pt").text(pt);
$(".pb").text(pb);
$(".pr").text(pr);
$(".ol").text(ol);
$(".ot").text(ot);
$(".wd").text(wd);
$(".hg").text(hg);
});
</script>
</body>
</html>위치 바꾸기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery</title>
<style>
div {line-height: 40px; text-align: center; background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);}
.circle1 {position: absolute; left: 100px; top: 400px; width: 40px; height: 40px; border-radius: 50%;}
.circle2 {position: absolute; right: 100px; bottom: 400px; width: 40px; height: 40px; border-radius: 50%;}
</style>
</head>
<body>
<div class="circle1">1</div>
<div class="circle2">2</div>
<button class="btn3">position1</button>
<button class="btn4">position2</button>
<ul>
<li><span>position().left : </span><span class="pl">0</span></li>
<li><span>position().top : </span><span class="pt">0</span></li>
<li><span>position().bottom : </span><span class="pb">0</span></li>
<li><span>position().right : </span><span class="pr">0</span></li>
<li><span>offset().left : </span><span class="ol">0</span></li>
<li><span>offset().top : </span><span class="ot">0</span></li>
<li><span>width() : </span><span class="wd">0</span></li>
<li><span>height() : </span><span class="hg">0</span></li>
</ul>
<!-- script -->
<script src="jquery.min_1.12.4.js"></script>
$(".btn3").click(function(){
$(".circle1").offset({top:70, left:200});
});
$(".btn4").click(function(){
$(".circle2").offset({top:270, left:20});
});
</script>
</body>
</html>231p 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery</title>
<style>
*{margin: 0; padding: 0;}
#box_wrap {width: 300px; height: 200px; margin: 50px auto 0; position: relative; background-color: #ccc;}
.box {width: 50px; height: 50px; position: absolute; font: 100px; top: 50px; background-color: #f00;}
</style>
</head>
<body>
<div id="box_wrap">
<p class="box">박스</p>
</div>
<p class="txt_1">절대 top위칫값; <span></span></p>
<p class="txt_2">상대 top위칫값; <span></span></p>
<!-- script -->
<script src="jquery.min_1.12.4.js"></script>
<script>
$(function(){
let $txt1 = $(".txt_1 span"),
$txt2 = $(".txt_2 span"),
$box = $(".box");
let off_t = $box.offset().top;
let pos_t = $box.position().top;
$txt1.text(off_t);
$txt2.text(pos_t);
});
</script>
</body>
</html>Last updated
Was this helpful?