javascript - attribute - tooltip html bootstrap

¿Cómo posicionar un DIV en coordenadas específicas?

Question

Quiero posicionar un DIV en coordenadas específicas? ¿Cómo puedo hacer eso usando Javascript?

Answer 1

Aquí hay un artículo correctamente descrito y también una muestra con código. Coordenadas JS

Según el requisito a continuación está el código que está publicado al final en ese artículo. Necesita llamar a la función getOffset y pasar el elemento html que devuelve sus valores superiores e izquierdos .

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 2

Cribré esto y agregué el ''px''; Funciona muy bien

function getOffset(el) {
  el = el.getBoundingClientRect();
  return {
    left: (el.right + window.scrollX ) +''px'',
    top: (el.top + window.scrollY ) +''px''
  }
}`enter code here`
to call: //Gets it to the right side
 el.style.top = getOffset(othis).top ; 
 el.style.left = getOffset(othis).left ; 

Answer 3

No tiene que usar Javascript para hacer esto. Usando CSS simple:

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

Si sientes que debes usar javascript, o estás tratando de hacer esto dinámicamente usando JQuery, esto afecta a todos los divs de la clase "blah":

$(''.blah'').css(''position'', ''absolute'');
$(''.blah'').css(''top'', 0); //or wherever you want it
$(''.blah'').css(''left'', 0); //or wherever you want it

Alternativamente, si debe usar el antiguo javascript normal, puede obtener el ID

document.getElementById(''myElement'').style.position = "absolute";
document.getElementById(''myElement'').style.top = 0; //or whatever 
document.getElementById(''myElement'').style.left = 0; // or whatever

Answer 4

También puede usar la propiedad css de posición fija.

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

Answer 5

bueno, depende si todo lo que quiere es posicionar un div y nada más, no necesita usar el script java para eso. Puedes lograr esto solo por CSS. Lo que importa es en relación a qué contenedor desea colocar su div, si desea colocarlo en relación con el cuerpo del documento, entonces su div debe estar posicionado en forma absoluta y su contenedor no debe colocarse relativamente o absolutamente, en ese caso su div se colocará relativo al contenedor.

De lo contrario, con Jquery, si desea colocar un elemento relativo al documento, puede usar el método offset ().

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

si es relativo a la posición padre desplazada, el pariente relativo o absoluto. luego usa siguiente ...

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 6

Script sus propiedades left y top como el número de píxeles desde el borde izquierdo y el borde superior, respectivamente. Debe tener position: absolute;

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

O hazlo como una función para que puedas adjuntarlo a un evento como 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'';
}