Come posizionare un DIV in coordinate specifiche?

Voglio posizionare un DIV in coordinate specifiche? Come posso farlo usando Javascript?

Scrivi le sue proprietà lefte topcome il numero di pixel rispettivamente dal bordo sinistro e dal bordo superiore. Deve avereposition: absolute;

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

Oppure fallo come una funzione in modo da poterlo allegare a un evento come 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';
}

Non è necessario utilizzare Javascript per farlo. Usando il vecchio css:

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

Se ritieni di dover utilizzare javascript o stai tentando di farlo dinamicamente utilizzando JQuery, ciò influisce su tutti i div della 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

In alternativa, se devi usare il vecchio javascript normale puoi prendere per 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

beh dipende se tutto quello che vuoi è posizionare un div e poi nient'altro, non hai bisogno di usare java script per questo. Puoi farlo solo con CSS. Ciò che conta è relativo al contenitore in cui vuoi posizionare il tuo div, se vuoi posizionarlo rispetto al corpo del documento allora il tuo div deve essere posizionato in modo assoluto e il suo contenitore non deve essere posizionato in modo relativo o assoluto, in tal caso il tuo div sarà posizionato rispetto al contenitore.

Altrimenti con Jquery se vuoi posizionare un elemento rispetto al documento puoi usare il metodo offset ().

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

se relativo alla posizione genitore offset, il genitore relativo o assoluto. quindi utilizzare quanto segue ...

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

È inoltre possibile utilizzare la proprietà CSS fissa di posizione.

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

Ecco un articolo adeguatamente descritto e anche un esempio con il codice. Coordinate JS

Secondo il requisito. sotto c'è il codice che è finalmente pubblicato in quell'articolo. È necessario chiamare la funzione getOffset e passare l'elemento html che restituisce i valori in alto e a sinistra .

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

Ho cribbato questo e ho aggiunto il "px"; Funziona molto bene.

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 ;