Come posizionare un div nella parte superiore di un altro div con javascript?

Question

Il primo div è la barra '#icon-selection-menu', la sua posizione di riposo è assoluta con top:0px e left:0px. Quindi appare nell'angolo in alto a sinistra all'interno del contenuto div.

In profondità nei bambini div di contenuto ho ottenuto altri div che sono in realtà una specie di "pulsante di emoticon". La loro posizione è relativa all'interno del genitore. Con questo clic del pulsante vorrei posizionare il primo div appena sopra il pulsante, regolando il suo bordo inferiore sul bordo superiore del pulsante.

Come posso ottenere superiore e sinistra valori per impostare $('#icon-selection-menu').top e $('#icon-selection-menu').left?

Answer 1

jQuery fornisce .offset() per ottenere la posizione di qualsiasi elemento relativo al documento. Dal momento che #icon-selection-menu è già posizionato rispetto al documento, è possibile utilizzare questo:

var destination = $('.emoticon-button').offset(); 
$('#icon-selection-menu').css({top: destination.top, left: destination.left}); 

$('#icon-selection-menu') sarà posizionato nell'angolo in alto a sinistra della $('.emoticon-button').

_{(1) jQuery assunto a causa dell'uso di $ nella domanda.}

Answer 2

è possibile ottenere la posizione dell'elemento usando il jquery sotto

var position=$('#icon-selection-menu').position(); 
var left=position.left; 
var right=position.right 

e click del pulsante che è possibile posizionarlo sopra utilizzando

$("#ID").live("click",function(){ 
    $('.emoticon-button').animate({left:left,right:right}); 
}); 

Answer 3

Get' .emoticon-tasto 'posizione (sinistra, in alto). Quindi applica lo stesso a "# icon-selection-menu". Ci sarebbero alcune regolazioni in alto e a sinistra per allinearsi con l'emoticon.

Answer 4

È possibile ottenere la posizione superiore e sinistro di un div con offsetTop e offsetLeft

Esempio: `

$('#div-id').offset().top; 
$('#div-id').offset().left; 

Answer 5

JavaScript ha un built-in versione di ciò che @bfavaretto menzionato. È un po 'più lungo della versione di Jquery, ma le persone come me che non usano Jquery potrebbero averne bisogno.

var iconselect = document.getElementById("icon-selection-menu"); 
var emoticonbtn = document.getElementById("emoticon-button"); 
var oTop = emoticonbtn.offsetTop; 
var oLeft = emoticonbtn.offsetLeft; 
iconselect.style.top = oTop; 
iconselect.style.left = oLeft; 
iconselect.style.position = "absolute"; 

È possibile, naturalmente, aggiungere unità a questo sistema come px o altre cose. Basta notare che quello che ho fatto sopra era solo un esempio ed è per due elementi separati con ID, non classi. Le prime due righe del codice variano in base al tuo codice. L'elemento iconselect è quello che sto cercando di allineare, e l'elemento emoticonbtn è il pulsante che si preme per far apparire iconselect. Le parti più importanti del codice riassunte:

elementtomove.offsetTop; //distance from top of screen 
elementtomove.offsetLeft; //distance from left of screen 

Spero che questo aiuti le persone che non sono disposti a utilizzare jQuery!