Jquery에서 상대 위치 지정을 구현하는 방법(세 가지 방법)

상대 위치 지정은 요소 자체의 원래 위치를 기준으로 위치를 지정할 수 있는 일반적인 CSS 위치 지정 방법입니다. 그러나 jQuery를 사용하면 DOM에서 상대 위치 지정을 수행할 수도 있습니다. 이 기사에서는 jQuery에서 상대 위치 지정을 구현하는 방법을 소개합니다.

1. .position() 메서드를 사용하세요

jQuery에서는 .position() 메서드를 사용하여 요소의 상대적 위치를 설정할 수 있습니다. 이 메소드는 요소의 상위 요소 및 뷰포트를 기준으로 변위를 반환하며 이를 기반으로 상대 위치 지정을 수행할 수 있습니다.

예를 들어 다음 코드는 .position() 메서드를 사용하여 요소를 원래 위치에서 50픽셀 아래로 배치합니다.

$(document).ready(function(){
    $("button").click(function(){
        $("div").position({
            my: "left top",
            at: "left+50 bottom",
            of: $(this)
        });
    });
});

먼저 문서가 로드된 후 버튼을 클릭하면 이벤트가 트리거됩니다. 다음으로 .position("left top")을 통해 요소의 초기 위치를 부모 요소의 왼쪽 위 모서리로 지정한 다음 .at("left+50 Bottom"을 통해 왼쪽으로 50픽셀 이동하도록 요소를 지정합니다. ") 및 아래에서 수정합니다. 마지막으로 .of($(this)) 는 요소의 상위 요소를 기준으로 하는 것이 아니라 버튼의 위치를 ​​기준으로 상대적으로 배치된 요소를 배치하는 것을 의미합니다.

2. .offset() 메서드를 사용하세요

jQuery의 .offset() 메서드는 문서를 기준으로 요소의 오프셋을 가져오거나 설정할 수 있으며, 이를 사용하여 상대 위치를 지정할 수도 있습니다.

예를 들어 다음 코드는 .offset() 메서드를 사용하여 초기 위치에서 50픽셀 아래에 요소를 배치합니다.

$(document).ready(function(){
    $("button").click(function(){
        var pos = $("div").offset();
        pos.top=pos.top+50;
        $("div").offset(pos);
    });
});

마찬가지로 문서가 로드된 후 버튼을 클릭하면 이벤트가 트리거됩니다. 다음으로 .offset() 메서드를 사용하여 요소의 위치를 ​​가져온 다음 요소의 .top 속성을 수정하여 50픽셀 아래로 이동하고 마지막으로 .offset() 메서드를 통해 수정된 위치를 재설정합니다.

3. .css() 메서드를 사용하세요

.position() 메서드와 .offset() 메서드 외에도 .css() 메서드를 사용하여 상대 위치를 지정할 수도 있습니다. 이 방법을 사용하면 상단, 왼쪽 등과 같은 요소의 CSS 속성을 직접 수정할 수 있습니다.

예를 들어, 다음 코드는 .css() 메서드를 사용하여 원래 위치보다 100픽셀 아래에 요소를 고정합니다.

$(document).ready(function(){
    $("button").click(function(){
        $("div").css({
            position: "relative",
            top: "100px"
        });
    });
});

버튼을 클릭하면 .css() 메서드는 요소의 상대 위치를 상대 위치로 설정합니다. 을 선택한 다음 .top 속성 값을 100px로 설정하여 요소를 원래 위치에서 상대적으로 100픽셀 아래로 배치합니다.

요약

위는 jQuery에서 상대 위치를 지정하는 세 가지 방법입니다. 각 방법에는 적용 가능한 시나리오가 있습니다.

.position() 메서드는 요소의 상위 요소와 뷰포트의 위치를 ​​고려해야 하는 상대 위치 지정에 적합합니다.

.offset() 메서드는 문서를 기준으로 요소의 위치를 ​​고려해야 하는 상대 위치 지정에 적합합니다.

.css() 메서드는 요소의 CSS 속성 값의 상대적 위치를 변경하는 데 적합합니다.

위 내용은 Jquery에서 상대 위치 지정을 구현하는 방법(세 가지 방법)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!