본문 바로가기

Webstoryboy

Category

Explanation

JQUERY/Alphabet

position()

position()

position() 메서드는 선택한 요소의 위치 좌표 값(기준점 기준)을 설정하거나 반환합니다.


position()

position() 메서드는 선택한 요소의 위치 좌표 값(기준점 기준)을 설정하거나 반환합니다.

특징 설명
버전(version) 1.x
결과값(return) 문자열(string)
사용성 ★★☆☆☆

문법(Syntax)

$("선택자").position();
$("선택자").position().left;
$("선택자").position().top;

//속성 값을 가져오는 경우
$("div").position();

//속성 값을 가져오는 경우
$("div").position().top;

//속성 값을 가져오는 경우
$("div").position().left;
  • 선택자(selector) : 선택자를 설정합니다.

정의(Definition)

  • position() 메서드는 선택한 요소의 위치 좌표 값(문서 기준)을 설정하거나 반환합니다.
  • offset() 메서드는 문서의 시작점 (0, 0)으로부터 위치 값을 가져오고, position() 메서드는 기준점(position:relative)으로 부터 위치 값을 가져옵니다.
  • position().top 메서드는 선택한 요소에 Y축 좌표 값을 가져옵니다.
  • position().left 메서드는 선택한 요소에 X축 좌표 값을 가져옵니다.
  • position() 메서드의 기준 점은 CSS에서 position:relative에 해당합니다.

위치와 관련된 메서드(Position Related method)

  • offset() 메서드는 선택한 요소의 위치 좌표 값(문서 기준)을 설정하거나 반환합니다.
  • position() 메서드는 선택한 요소의 위치 좌표 값(기준점 기준)을 설정하거나 반환합니다.
  • scrollLeft() 메서드는 선택한 요소의 가로 스크롤 값을 설정하거나 반환합니다.
  • scrollTop() 메서드는 선택한 요소의 세로 스크롤 값을 설정하거나 반환합니다.

예제1(Sample)

버튼을 클릭하면 박스의 위치 값을 가져오는 예제입니다.
width: 400px
margin: 20px
border: 2px
padding: 20px
여기에 결과값이 표시됩니다.
HTML
CSS
SCRIPT
<div class="jsample">
    <div class="box">
        <span>
            width: 400px<br>
            margin: 20px<br>
            border: 2px<br>
            padding: 20px<br>
        </span>
    </div>
    <div class="desc">여기에 결과값이 표시됩니다.</div>
</div>
.jsample {
    text-align: center;
}
.jsample .box {
    margin: 20px auto;
    width: 400px;
    height: 200px;
    background-color: #f9f2f4;
    border: 2px solid #a51a3d;
    padding: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.jsample .box::before {
    content: '';
    width: 358px;
    height: 158px;
    border: 1px dashed #a51a3d;
    position: absolute;
    left: 20px; top: 20px;
}
.jsample .box::after {
    content: '';
    width: 440px;
    height: 240px;
    border: 1px dashed #a51a3d;
    position: absolute;
    left: -21px; top: -21px;
}
.jsample .box span {
    color: #c7254e;
}
.jsample .desc {
    padding-top: 10px;
}
const box = $("#sample1 .jsample > div");

    $("#sample1 .btn1").click(function(e){
        e.preventDefault();
        $("#sample1 .jsample .desc").text("이 박스의 top값은 " + box.offset().top + "px 입니다.");
    });
    $("#sample1 .btn2").click(function(e){
        e.preventDefault();
        $("#sample1 .jsample .desc").text("이 박스의 left값은 " + box.offset().left + "px 입니다.");
    });
    $("#sample1 .btn3").click(function(e){
        e.preventDefault();
        $("#sample1 .jsample .desc").text("이 박스의 top값은 " + box.position().top + "px 입니다.");
    });
    $("#sample1 .btn4").click(function(e){
        e.preventDefault();
        $("#sample1 .jsample .desc").text("이 박스의 left값은 " + box.position().left + "px 입니다.");
    });

예제2(Sample)

원을 드래그 하면 위치 값을 가져오는 예제입니다.
drag
offset().left : 0
offset().top : 0
position().left : 0
position().top : 0
원을 드래그 하면 위치값이 표시됩니다.
HTML
CSS
SCRIPT
<div class="jsample">
    <div class="circle">drag</div>
    <div class="desc">
        offset().left : <span class="d1">0</span><br>
        offset().top : <span class="d2">0</span><br>
        position().left : <span class="d3">0</span><br>
        position().top : <span class="d4">0</span>
    </div>
</div>
#sample2 .jsample {
    min-height: 300px;
    position: relative;
}
#sample2 .jsample .circle {
    width: 100px;
    height: 100px;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 50%;
    border: 1px dashed #a51a3d;
    line-height: 100px;
}
#sample2 .jsample .desc {
    position: absolute;
    bottom: 0px;
    left: 0px;
    text-align: left;
}
const circle = $("#sample2 .jsample .circle");

circle.draggable({
    drag:function(){
        $('#sample2 .desc .d1').text( circle.offset().left + "px");
        $('#sample2 .desc .d2').text( circle.offset().top + "px");
        $('#sample2 .desc .d3').text( circle.position().left + "px");
        $('#sample2 .desc .d4').text( circle.position().top + "px");
    }
});

호환성(Compatibility)

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
position() jQeury 1.x 버전
jQeury 2.x 버전
jQeury 3.x 버전

참고 사이트(Reference)


더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기