Como posicionar um DIV em coordenadas específicas?

Quero posicionar um DIV em coordenadas específicas? Como posso fazer isso usando Javascript?

Faça o script de suas propriedades lefte topcomo o número de pixels da borda esquerda e da borda superior, respectivamente. Deve terposition: absolute;

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

Ou faça isso como uma função para que você possa anexá-lo a um evento como 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';
}

Você não precisa usar Javascript para fazer isso. Usando o CSS simples:

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

Se você acha que deve usar javascript ou está tentando fazer isso dinamicamente usando JQuery, isso afeta todos os divs da classe "blah":

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

Alternativamente, se você deve usar o antigo javascript regular, você pode pegar pelo 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

bem, depende se tudo o que você quer é posicionar um div e nada mais, você não precisa usar java script para isso. Você pode fazer isso apenas por CSS. O que importa é em relação a qual contêiner você deseja posicionar seu div, se você deseja posicioná-lo em relação ao corpo do documento, seu div deve ser posicionado de forma absoluta e seu contêiner não deve ser posicionado de forma relativa ou absoluta, nesse caso seu div será posicionado em relação ao contêiner.

Caso contrário, com Jquery, se você deseja posicionar um elemento em relação ao documento, você pode usar o método offset ().

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

se relativo para deslocar a posição do pai, o pai relativo ou absoluto. então use o seguinte ...

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
});

Você também pode usar a propriedade css fixa de posição.

<!-- 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

Aqui está um artigo devidamente descrito e também um exemplo com o código. Coordenadas JS

De acordo com a exigência. abaixo está o código que foi finalmente postado naquele artigo. Precisa chamar a função getOffset e passar o elemento html que retorna seus valores superior e esquerdo .

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)
    }
}

Eu cribbed isto e adicionando o 'px'; Funciona muito bem.

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 ;