특정 좌표에 DIV를 배치하는 방법은 무엇입니까?

특정 좌표에 DIV를 배치하고 싶습니까? Javascript를 사용하여 어떻게 할 수 있습니까?

left및 top속성을 각각 왼쪽 가장자리와 위쪽 가장자리의 픽셀 수로 스크립팅합니다 . 있어야합니다position: absolute;

var d = document.getElementById('yourDivId');
d.style.position = "absolute";
d.style.left = x_pos+'px';
d.style.top = y_pos+'px';

또는 기능으로 수행하여 다음과 같은 이벤트에 첨부 할 수 있습니다. onmousedown

function placeDiv(x_pos, y_pos) {
  var d = document.getElementById('yourDivId');
  d.style.position = "absolute";
  d.style.left = x_pos+'px';
  d.style.top = y_pos+'px';
}

이를 위해 Javascript를 사용할 필요가 없습니다. 평범한 CSS 사용 :

div.blah {
  position:absolute;
  top: 0; /*[wherever you want it]*/
  left:0; /*[wherever you want it]*/
}

자바 스크립트를 사용해야한다고 생각하거나 JQuery를 사용하여 동적으로이 작업을 수행하려는 경우 "blah"클래스의 모든 div에 영향을줍니다.

var blahclass =  $('.blah'); 
blahclass.css('position', 'absolute');
blahclass.css('top', 0); //or wherever you want it
blahclass.css('left', 0); //or wherever you want it

또는 일반 이전 자바 스크립트를 사용해야하는 경우 ID로 가져올 수 있습니다.

var domElement = document.getElementById('myElement');// don't go to to DOM every time you need it. Instead store in a variable and manipulate.
domElement.style.position = "absolute";
domElement.style.top = 0; //or whatever 
domElement.style.left = 0; // or whatever

원하는 모든 것이 div를 배치하고 다른 것은 없는지 여부에 따라 다르므로 Java 스크립트를 사용할 필요가 없습니다. CSS로만이 작업을 수행 할 수 있습니다. 중요한 것은 div를 배치하려는 컨테이너와 관련이 있습니다. 문서 본문에 상대적으로 배치하려면 div가 절대 위치에 있어야하며 컨테이너는 상대적으로 또는 절대적으로 배치되지 않아야합니다.이 경우 div가 배치됩니다. 컨테이너에 상대적입니다.

그렇지 않으면 Jquery를 사용하여 문서를 기준으로 요소를 배치하려면 offset () 메서드를 사용할 수 있습니다.

$(".mydiv").offset({ top: 10, left: 30 });

오프셋 상위 위치에 상대적인 경우 상위 상대 또는 절대입니다. 다음을 사용하십시오 ...

var pos = $('.parent').offset();
var top = pos.top + 'no of pixel you want to give the mydiv from top relative to parent';
var left = pos.left + 'no of pixel you want to give the mydiv from left relative to parent';

$('.mydiv').css({
  position:'absolute',
  top:top,
  left:left
});

위치 고정 CSS 속성을 사용할 수도 있습니다.

<!-- html code --> 
<div class="box" id="myElement"></div>

/* css code */
.box {
    position: fixed;
}

// js code

document.getElementById('myElement').style.top = 0; //or whatever 
document.getElementById('myElement').style.left = 0; // or whatever

다음은 올바르게 설명 된 문서와 코드가있는 샘플입니다. JS 좌표

요구 사항에 따라. 아래는 그 기사에 마침내 게시 된 코드입니다. getOffset 함수 를 호출 하고 상단 및 왼쪽 값 을 반환하는 html 요소를 전달해야 합니다.

function getOffsetSum(elem) {
  var top=0, left=0
  while(elem) {
    top = top + parseInt(elem.offsetTop)
    left = left + parseInt(elem.offsetLeft)
    elem = elem.offsetParent        
  }

  return {top: top, left: left}
}


function getOffsetRect(elem) {
    var box = elem.getBoundingClientRect()

    var body = document.body
    var docElem = document.documentElement

    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft

    var clientTop = docElem.clientTop || body.clientTop || 0
    var clientLeft = docElem.clientLeft || body.clientLeft || 0

    var top  = box.top +  scrollTop - clientTop
    var left = box.left + scrollLeft - clientLeft

    return { top: Math.round(top), left: Math.round(left) }
}


function getOffset(elem) {
    if (elem.getBoundingClientRect) {
        return getOffsetRect(elem)
    } else {
        return getOffsetSum(elem)
    }
}

나는 이것을 집어 넣고 'px'를 추가했다; 아주 잘 작동합니다.

function getOffset(el) {
  el = el.getBoundingClientRect();
  return {
    left: (el.right + window.scrollX ) +'px',
    top: (el.top + window.scrollY ) +'px'
  }
}
to call: //Gets it to the right side
 el.style.top = getOffset(othis).top ; 
 el.style.left = getOffset(othis).left ;