Wie positioniere ich einen DIV in bestimmten Koordinaten?

Ich möchte einen DIV in bestimmten Koordinaten positionieren. Wie kann ich das mit Javascript machen?

Schreiben Sie seine leftund topEigenschaften als die Anzahl der Pixel vom linken bzw. oberen Rand. Es muss habenposition: absolute;

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

Oder tun Sie es als Funktion, damit Sie es an ein Ereignis wie anhängen können 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';
}

Sie müssen dazu kein Javascript verwenden. Verwenden von einfachem altem CSS:

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

Wenn Sie der Meinung sind, dass Sie Javascript verwenden müssen oder dies dynamisch mithilfe von JQuery versuchen, wirkt sich dies auf alle Divs der Klasse "blah" aus:

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

Wenn Sie alternativ altes Javascript verwenden müssen, können Sie alternativ nach ID greifen

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

Nun, es hängt davon ab, ob Sie nur ein Div positionieren möchten und dann nichts anderes. Sie müssen dafür kein Java-Skript verwenden. Sie können dies nur durch CSS erreichen. Was zählt, ist relativ zu dem Container, in dem Sie Ihr Div positionieren möchten. Wenn Sie es relativ zum Dokumentkörper positionieren möchten, muss Ihr Div absolut positioniert sein und sein Container darf nicht relativ oder absolut positioniert sein. In diesem Fall wird Ihr Div positioniert relativ zum Container.

Andernfalls können Sie mit Jquery die Methode offset () verwenden, wenn Sie ein Element relativ zum Dokument positionieren möchten.

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

wenn relativ zur versetzten übergeordneten Position die übergeordnete relative oder absolute. dann benutze folgendes ...

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

Sie können auch die positionsfeste CSS-Eigenschaft verwenden.

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

Hier ist ein richtig beschriebener Artikel und auch ein Beispiel mit Code. JS-Koordinaten

Gemäß Anforderung. unten ist Code, der zuletzt in diesem Artikel veröffentlicht wird. Sie müssen die Funktion getOffset aufrufen und das HTML-Element übergeben, das die oberen und linken Werte zurückgibt .

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

Ich habe das abgeschnitten und das 'px' hinzugefügt; Funktioniert sehr gut.

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 ;