如何使用javascript將div放在另一個div的頂部？

Question

第一個div是'#icon-selection-menu'欄，它的空閑位置絕對是top:0px和left:0px 。 所以它出現在內容div里面的左上角。

在內容div孩子的深處，我得到了其他div，實際上是'.emoticon-button'。 他們的位置在他們的父母內部相對。 按下這樣的按鈕，我想將第一個div放在按鈕上方，將其底部邊框調整到按鈕的頂部邊框。

我怎樣才能獲得頂部和左側值來設置$('#icon-selection-menu').top和$('#icon-selection-menu').left ？

Answer 1

jQuery ¹提供.offset()來獲取任何元素相對於文檔的位置。 由於#icon-selection-menu已經相對於文檔定位，您可以使用：

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

$('#icon-selection-menu')將放置在$('.emoticon-button')左上角。

_{（1）jQuery假設由於在問題中使用$ 。}

Answer 2

您可以使用offsetTop和offsetLeft獲取div的頂部和左側位置

例如：`

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

Answer 3

Javascript有@bfavaretto提到的內置版本。 它比Jquery版本長一點，但像我這樣不使用Jquery的人可能需要它。

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";

當然，您可以在此系統中添加單位，例如px或其他內容。 請注意，我上面所做的只是一個例子，是兩個帶有ID的單獨元素，而不是類。 代碼的前兩行將根據您的代碼而有所不同。 元素iconselect是我想要對齊的元素，元素emoticonbtn是你按下按鈕以顯示iconselect 。 代碼中最重要的部分總結如下：

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

希望這能幫助那些不願意使用JQUERY的人！

Answer 4

你可以使用下面的jquery獲取元素的位置

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

點擊該按鈕，您可以使用以上位置

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

Answer 5

獲取'.emoticon-button'位置（左，上）。 然后將其應用於'＃icon-selection-menu'。 頂部和左側會有一些調整以與表情符號對齊。