Come posizionare un DIV in coordinate specifiche?


Risposte:


170

Scrivi le sue proprietà lefte topcome il numero di pixel rispettivamente dal bordo sinistro e dal bordo superiore. Deve avereposition: absolute;

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

Oppure fallo come una funzione in modo da poterlo allegare a un evento come 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';
}

Recupero le coordinate x, y dal clic del mouse, come posso visualizzare il Div nella posizione del mouse?
Adham

@adham hai già le coordinate x, y? Basta applicarli al posto di x_pos,y_pos
Michael Berkowski

gira sempre la posizione ... è possibile impostare la posizione come 1.6 invece di diventare 2 o 1.
Muhammad Umer

cosa succede se abbiamo coordinate, (x1, y2) (x2, y2) (x3, y3) (x4, y4)?
John dey

Sto facendo la stessa identica cosa ma il mio div non si posiziona vicino alla coordinata del mio mouse. Tuttavia si sposta nella posizione iniziale superiore della pagina principale dopo l'intestazione. Intendo il master Div. Qualcuno può aiutarmi a capire perché?
JNPW

32

Non è necessario utilizzare Javascript per farlo. Usando il vecchio css:

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

Se ritieni di dover utilizzare javascript o stai tentando di farlo dinamicamente utilizzando JQuery, ciò influisce su tutti i div della 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

In alternativa, se devi usare il vecchio javascript normale puoi prendere per 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

che cosa? dovresti usare .class invece di myElement e in alto a sinistra invece di x & y, non dovresti?
TMS

Oltre a ottenere un riferimento a un elemento HTML con document.getElemtentById(), puoi anche fare riferimento ad esso con un selettore arbitrario simile a jQuery con document.querySelector () e le sue numerose varianti
Shammel Lee

9

beh dipende se tutto quello che vuoi è posizionare un div e poi nient'altro, non hai bisogno di usare java script per questo. Puoi farlo solo con CSS. Ciò che conta è relativo al contenitore in cui vuoi posizionare il tuo div, se vuoi posizionarlo rispetto al corpo del documento allora il tuo div deve essere posizionato in modo assoluto e il suo contenitore non deve essere posizionato in modo relativo o assoluto, in tal caso il tuo div sarà posizionato rispetto al contenitore.

Altrimenti con Jquery se vuoi posizionare un elemento rispetto al documento puoi usare il metodo offset ().

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

se relativo alla posizione genitore offset, il genitore relativo o assoluto. quindi utilizzare quanto segue ...

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

Fantastico @Ehtesham Mi ha davvero aiutato.
RN Kushwaha

2

È inoltre possibile utilizzare la proprietà CSS fissa di posizione.

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

2

Ecco un articolo adeguatamente descritto e anche un esempio con il codice. Coordinate JS

Secondo il requisito. sotto c'è il codice che è finalmente pubblicato in quell'articolo. È necessario chiamare la funzione getOffset e passare l'elemento html che restituisce i valori in alto e a sinistra .

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

0

Ho cribbato questo e ho aggiunto il "px"; Funziona molto bene.

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 ; 
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.