jQuery에서 문서가 아닌 부모를 기준으로 위치 값을 사용하여 요소의 "맨 위, 왼쪽" 속성을 설정하려면 어떻게 해야 합니까?

jQuery에서 문서가 아닌 부모를 기준으로 위치 값을 사용하여 요소의 "맨 위, 왼쪽" 속성을 설정하려면 어떻게 해야 합니까?

.offset([coordinates])method는 요소의 좌표를 설정하지만 문서에 대해서만 상대적입니다.그러면 요소의 좌표를 부모에 대해 상대적으로 설정하려면 어떻게 해야 합니까?

나는 그것을 발견했습니다..position()메서드는 상위 항목에 상대적인 "상위, 왼쪽" 값만 가져오지만 값은 설정하지 않습니다.

로 시도했습니다.

$("#mydiv").css({top: 200, left: 200});

하지만 작동하지 않습니다.

부모에 상대적인 위치를 설정하려면 다음을 설정해야 합니다.position:relative부모와position:absolute기본적인

$("#mydiv").parent().css({position: 'relative'});
$("#mydiv").css({top: 200, left: 200, position:'absolute'});

이는 다음과 같은 이유로 작동합니다.position: absolute;가장 가까운 위치에 있는 부모(즉, 기본값 이외의 위치 속성을 가진 가장 가까운 부모)에 상대적인 위치static).

$("#mydiv").css('top', 200);

$("#mydiv").css('left', 200);

jQuery UI의 .position 방법을 사용해 볼 수 있습니다.

$("#mydiv").position({
  of: $('#mydiv').parent(),
  my: 'left+200 top+200',
  at: 'left top'
});

작업 데모를 확인합니다.

전달된 값이 문자열 유형이면 'px'(즉, 90px) 뒤에 와야 합니다. 여기서 값이 정수이면 px가 자동으로 추가됩니다.폭 및 높이 특성이 더 관대합니다(어느 유형이든 작업 가능).

var x = "90";
var y = "120"
$(selector).css( { left: x, top: y } )        //doesn't work
$(selector).css( { left: x + "px", top: y + "px" } )        //does work

x = 90;
y = 120;
$(selector).css( { left: x, top: y } )        //does work

동적 페이지에 대한 코드 오프셋 동적

var pos=$('#send').offset().top;
$('#loading').offset({ top : pos-220});

자리 잡는 것에 대한 기억을 되살리고, 너무 늦게 와서 다른 사람이 볼 수 있을지 모르겠지만, --

다음을 사용하여 위치를 설정하는 것을 좋아하지 않습니다.css()가끔은 괜찮지만요.가장 좋은 방법은 jQuery UI를 사용하는 것입니다.position()xdazz가 언급한 세터.그러나 어떤 이유로 jQuery UI가 옵션이 아닌 경우(그러나 jQuery UI는 옵션이 아님), 저는 다음을 선호합니다.

const leftOffset = 200;
const topOffset = 200;
let $div = $("#mydiv");
let baseOffset = $div.offsetParent().offset();
$div.offset({
  left: baseOffset.left + leftOffset,
  top: baseOffset.top + topOffset
});

이는 임의로 설정하지 않는 장점이 있습니다.$div의 부모에서 상대적 위치 지정(만약 그렇다면).$div의 부모는 그 자체로 다른 무언가 안에 절대적으로 위치하고 있었습니까?)내 생각에 유일한 중요한 엣지 케이스는$div없습니다.offsetParent그것이 돌아올지 어떨지 확실치 않은document,null아니면 완전히 다른 것.

offsetParent2008년경 jQuery 1.2.6 이후부터 사용할 수 있으므로 이 기술은 원래 질문이 있을 때 현재도 작동합니다.

사용하다offset()의 기능.jQuery여기에는 다음이 포함됩니다.

$container.offset({
        'left': 100,
        'top': mouse.y - ( event_state.mouse_y - event_state.container_top ) 
    });

언급URL : https://stackoverflow.com/questions/12744928/in-jquery-how-can-i-set-top-left-properties-of-an-element-with-position-values