如何使用javascript将一个div定位在另一个div的顶部？

第一个div是

“#图标选择菜单”

栏，它的空闲位置是绝对的

top:0px

和

left:0px

。所以它出现在内容分区的左上角

在内容部分的孩子们，我得到了其他的部分，实际上有点像“.emoticon按钮”。他们的位置在他们的父母中是相对的。在这样的按钮点击我想定位按钮上方的第一个div，调整它的底部边界到按钮的顶部边界

---

如何获取顶部和左侧值以设置

$（“#图标选择菜单”）。顶部

和

$（“#图标选择菜单”）。左侧

？

您可以使用下面的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});
});

---

获取“.emoticon按钮”位置（左，上）。然后将其应用于“#图标选择菜单”。顶部和左侧可能会有一些调整，以与图释对齐。

jQuery1提供用于获取任何元素相对于文档的位置。由于

#图标选择菜单

已相对于文档定位，因此您可以使用以下方法：

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

$（“#图标选择菜单”）

将放置在

$（“.emoticon按钮”）

的左上角

---

（1） 由于在问题中使用了

$

，因此假设使用jQuery。

可以使用offsetTop和offsetLeft获取div的顶部和左侧位置

例如：`

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

---

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的人

为该显示添加相对css属性：相对；position（）返回父框中的top和left，很抱歉，这对我不起作用。谢谢你的建议。谢谢你，普拉萨！我投了赞成票，但在另一篇文章中标记为解决方案，因为它更详细。position（）在父框中返回top和left，很抱歉，这对我不起作用。谢谢你的建议。第二行可以是

$（“#图标选择菜单”）.css（目的地）不能吗？或
$（'#图标选择菜单'）。偏移量（目的地）@BobStein VisiBone是的！conselect.style.top=oTop+“px”；iconselect.style.left=oLeft+“px”；否则它不起作用，只应用绝对属性。添加像素或不添加像素仍然有效。对于更精确的示例，建议您使用px，但在本示例中，它不需要工作