Bir DIV belirli bir koordinatlarda nasıl konumlandırılır?

Bir DIV'yi belirli bir koordinatlarda konumlandırmak istiyorum? Bunu Javascript kullanarak nasıl yapabilirim?

Komut dosyasını leftve topözelliklerini sırasıyla sol kenardan ve üst kenardan piksel sayısı olarak yazın. Sahip olmalıposition: absolute;

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

Veya bunu bir işlev olarak yapın, böylece bir etkinliğe ekleyebilirsiniz. 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';
}

Bunu yapmak için Javascript kullanmanız gerekmez. Sade eski css kullanarak:

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

Javascript kullanmanız gerektiğini düşünüyorsanız veya bunu dinamik olarak yapmaya çalışıyorsanız JQuery kullanarak, bu "blah" sınıfının tüm div'lerini etkiler:

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

Alternatif olarak, normal eski javascript kullanmanız gerekiyorsa, id ile yakalayabilirsiniz

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

tek istediğiniz şey bir div konumlandırmak ve sonra başka bir şey değil, bunun için java betiğini kullanmanıza gerek yoktur. Bunu yalnızca CSS ile başarabilirsiniz. Önemli olan, div'inizi hangi kapsayıcıyı konumlandırmak istediğinize bağlıdır, eğer onu belge gövdesine göre konumlandırmak istiyorsanız, o zaman div'iniz mutlak olarak konumlandırılmalıdır ve kapsayıcısı görece veya mutlak olarak konumlandırılmamalıdır, bu durumda div konumunuz olacaktır. konteynere göre.

Aksi takdirde, Jquery ile bir öğeyi belgeye göre konumlandırmak istiyorsanız, offset () yöntemini kullanabilirsiniz.

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

ofset ana pozisyonuna göre ise ebeveyn göreceli veya mutlak. sonra aşağıdakileri kullanın ...

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

Ayrıca position fixed css özelliğini de kullanabilirsiniz.

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

İşte uygun şekilde tanımlanmış bir makale ve ayrıca kodlu bir örnek. JS koordinatları

İhtiyaca göre. Aşağıda o makalede en sonunda yayınlanan kod bulunmaktadır. Çağırmak için İhtiyaç getOffset fonksiyonu ve onun döndüren html elemanı geçmesi üst ve sol değerleri.

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

Bunu aldım ve 'px' ekledim; Çok iyi çalışıyor.

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 ;