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

Question

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

Answer 1

Guión su left y top adecuada vincula como el número de píxeles desde el borde izquierdo y el borde superior, respectivamente. Se 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 hacerlo en función por lo que puede adjuntar 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'; 
} 

Answer 2

No tiene que usar Javascript para hacer esto. Usando llanura de edad, css:

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

Si usted siente que debe usar JavaScript o está tratando de hacer esto de forma dinámica usando jQuery, esto afecta a todos los divs de clase "bla":

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

Como alternativa, si tiene que usar regularmente pasada de JavaScript se puede agarrar por id

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

Answer 3

así que depende si lo que quieres es colocar un div y luego otra cosa , 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 utilizar el método offset().

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

si con respecto al desplazamiento de posición de los padres a los padres relativa o absoluta. luego use following ...

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

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

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

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

Según el requisito. a continuación está el código que está publicado al final en ese artículo. Necesita llamar a getOffset function y pasar el elemento html que devuelve su top y valores 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 6

I cribbed this 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 ;