Bagaimana cara memposisikan DIV dalam koordinat tertentu?

Saya ingin memposisikan DIV dalam koordinat tertentu? Bagaimana saya bisa melakukannya menggunakan Javascript?

Script its leftand topproperties masing-masing sebagai jumlah piksel dari tepi kiri dan tepi atas. Itu pastiposition: absolute;

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

Atau lakukan sebagai fungsi sehingga Anda dapat melampirkannya ke acara seperti 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';
}

Anda tidak harus menggunakan Javascript untuk melakukan ini. Menggunakan css biasa-lama:

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

Jika Anda merasa Anda harus menggunakan javascript, atau mencoba melakukan ini secara dinamis Menggunakan JQuery, ini memengaruhi semua div kelas "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

Sebagai alternatif, jika Anda harus menggunakan javascript lama biasa Anda dapat mengambil dengan 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

baik itu tergantung jika yang Anda inginkan adalah memposisikan div dan tidak ada yang lain, Anda tidak perlu menggunakan java script untuk itu. Anda dapat mencapai ini hanya dengan CSS. Yang penting adalah relatif terhadap penampung apa yang Anda inginkan untuk memposisikan div Anda, jika Anda ingin memposisikannya relatif terhadap badan dokumen maka div Anda harus diposisikan absolut dan penampungnya tidak boleh diposisikan secara relatif atau mutlak, dalam hal ini div Anda akan diposisikan relatif terhadap wadah.

Sebaliknya dengan Jquery jika Anda ingin memposisikan elemen relatif terhadap dokumen, Anda dapat menggunakan metode offset ().

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

jika relatif untuk mengimbangi posisi induk, relatif atau absolut induk. kemudian gunakan mengikuti ...

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

Anda juga dapat menggunakan properti css posisi tetap.

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

Berikut adalah artikel yang dijelaskan dengan benar dan juga contoh dengan kode. Koordinat JS

Sesuai kebutuhan. di bawah ini adalah kode yang akhirnya diposting di artikel itu. Perlu memanggil fungsi getOffset dan meneruskan elemen html yang mengembalikan nilai atas dan kirinya .

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

Saya menuliskan ini dan menambahkan 'px'; Bekerja dengan sangat baik.

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 ;