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

특정 좌표에 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가 절대 위치에 있어야하며 컨테이너는 최빈값으로 또는 절대적으로 배치되지 않습니다. 컨테이너에 최후입니다.

정렬 된 Jquery를 사용하여 문서를 기준으로 요소를 배치 예측 오프셋 () 메서드를 사용할 수 있습니다.

$(".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 ; 

참고 URL : https://stackoverflow.com/questions/6802956/how-to-position-a-div-in-a-specific-coordinates