¿Cómo posicionar un DIV en unas coordenadas específicas?

¿Quiero colocar un DIV en unas coordenadas específicas? ¿Cómo puedo hacer eso usando Javascript?

Escriba sus propiedades lefty topcomo el número de píxeles desde el borde izquierdo y el borde superior respectivamente. Debe tenerposition: absolute;

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

O hazlo como una función para que puedas adjuntarlo a un 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';
}

No tiene que usar Javascript para hacer esto. Usando CSS simple:

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

Si cree que debe usar javascript, o está tratando de hacer esto dinámicamente usando JQuery, esto afecta a todos los divs de la clase "bla":

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, si debe usar javascript antiguo regular, puede obtener por 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

bueno, depende de si todo lo que quieres es colocar un div y luego nada más, no necesitas usar un script java para eso. Puede lograr esto solo mediante CSS. Lo que importa es en relación con el contenedor en el que desea colocar su div, si desea colocarlo en relación con el cuerpo del documento, entonces su div debe estar posicionado en absoluto y su contenedor no debe estar posicionado relativa o absolutamente, en ese caso su div será posicionado en relación con el contenedor.

De lo contrario, con Jquery, si desea colocar un elemento en relación con el documento, puede usar el método offset ().

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

si es relativo al desplazamiento de la posición del padre, el padre relativo o absoluto. luego use lo siguiente ...

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

También puede utilizar la propiedad CSS de posición fija.

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

Aquí hay un artículo descrito correctamente y también una muestra con código. Coordenadas JS

Según el requisito. a continuación se muestra el código que finalmente se publica en ese artículo. Necesita llamar a la función getOffset y pasar el elemento html que devuelve sus valores superior e izquierdo .

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

Cogí esto y agregué el 'px'; Funciona muy bien.

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 ;