Comment positionner un DIV dans des coordonnées spécifiques?

Je veux positionner un DIV dans des coordonnées spécifiques? Comment puis-je faire cela en utilisant Javascript?

Script ses propriétés leftet topcomme le nombre de pixels respectivement du bord gauche et du bord supérieur. Il doit avoirposition: absolute;

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

Ou faites-le en tant que fonction pour pouvoir l'attacher à un événement comme 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';
}

Vous n'êtes pas obligé d'utiliser Javascript pour cela. En utilisant un css simple:

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

Si vous pensez que vous devez utiliser javascript, ou si vous essayez de le faire dynamiquement en utilisant JQuery, cela affecte toutes les div de la 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

Alternativement, si vous devez utiliser du javascript ancien, vous pouvez récupérer par identifiant

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

Eh bien, cela dépend si tout ce que vous voulez est de positionner un div et rien d'autre, vous n'avez pas besoin d'utiliser un script java pour cela. Vous ne pouvez y parvenir que par CSS. Ce qui compte, c'est par rapport au conteneur dans lequel vous voulez positionner votre div, si vous voulez le positionner par rapport au corps du document, votre div doit être positionné de manière absolue et son conteneur ne doit pas être positionné de manière relative ou absolue, dans ce cas votre div sera positionné par rapport au conteneur.

Sinon, avec Jquery, si vous souhaitez positionner un élément par rapport au document, vous pouvez utiliser la méthode offset ().

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

s'il est relatif à la position parent offset, le parent relatif ou absolu. puis utilisez ce qui suit ...

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

Vous pouvez également utiliser la propriété css à position fixe.

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

Voici un article correctement décrit et également un exemple avec du code. Coordonnées JS

Selon l'exigence. ci-dessous est le code qui est enfin posté dans cet article. Besoin d'appeler la fonction getOffset et de transmettre l'élément html qui renvoie ses valeurs supérieure et gauche .

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

J'ai cribbed ceci et ai ajouté le «px»; Fonctionne très 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 ;