jQuery에서 문서가 아닌 부모를 기준으로 위치 값을 가진 요소의 "top, left"속성을 어떻게 설정할 수 있습니까?

.offset([coordinates])메소드는 요소의 좌표를 설정하지만 문서를 기준으로합니다. 그런 다음 요소의 좌표를 부모와 관련하여 어떻게 설정할 수 있습니까?

이 .position()메소드는 부모와 관련하여 "top, left"값만 가져 오지만 값을 설정하지는 않습니다.

나는 함께 노력했다

$("#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;가장 가까운 위치에있는 부모 (즉, default 이외의 위치 속성을 가진 가장 가까운 부모)에 상대적으로 위치 하기 때문에 작동합니다 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가 자동으로 추가됩니다. width 및 height 속성이 더 관대합니다 (두 유형 모두 작동).

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()않지만 종종 괜찮습니다. position()xdazz가 지적한 것처럼 jQuery UI의 setter 를 사용하는 것이 가장 좋은 방법이라고 생각합니다 . 그러나 jQuery UI가 어떤 이유로 옵션이 아닌 경우 (아직 jQuery는 아닙니다) 다음을 선호합니다.

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하지 않다고 생각합니다 .offsetParentdocumentnull 또는 완전히 다른 것.

offsetParent jQuery 1.2.6부터 2008 년 언젠가 사용할 수 있었 으므로이 기술은 현재와 원래의 질문을 받았을 때 작동합니다.

의 offset()기능을 사용하십시오 jQuery. 여기있을 것입니다 :

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