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

Question

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

Answer 1

Script son left et top comme le nombre de pixels à partir du bord gauche et du bord supérieur respectivement. Il doit avoir position: 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 comme une 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';
}

Answer 2

Vous n'avez pas besoin d'utiliser Javascript pour cela. Il suffit d'utiliser un simple css :

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 faire cela dynamiquement En utilisant JQuery, cela affecte tous les divs 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 le bon vieux Javascript, vous pouvez saisir par l'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

Answer 3

Eh bien ça dépend si tout ce que vous voulez c'est positionner un div et puis rien d'autre, vous n'avez pas besoin d'utiliser java script pour ça. Vous pouvez réaliser cela uniquement par CSS. Ce qui compte c'est par rapport à quel conteneur vous voulez positionner votre div, si vous voulez le positionner par rapport au corps du document alors 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 voulez positionner un élément par rapport au document, vous pouvez utiliser la méthode offset().

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

si c'est relatif au décalage de la position du parent le parent est relatif ou absolu. alors 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
});

Answer 4

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

Conformément à l'exigence. ci-dessous est le code qui est affiché à la fin dans cet article. Besoin d'appeler getOffset et passe l'élément html qui renvoie son top et gauche valeurs.

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

Answer 5

Vous pouvez également utiliser la propriété css position fixed.

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