如何将一个div置于另一个div的顶部

Question

第一个div是"id='icon-selection-menu'"的菜单栏，它的初始位置是绝对定位，具有"top:0px"和"left:0px"。因此它出现在内容div内的左上角。

在内容div的子级中，我有其他的div，它们实际上是“.emoticon-button”类型的按钮。它们的位置相对于父级而言是相对定位。当点击这样的按钮时，我想把第一个div定位在该按钮的正上方，将它的底部边缘调整到按钮的顶部边缘。

如何获取"top"和"left"值以设置"$('#icon-selection-menu').top"和"$('#icon-selection-menu').left"？

- zuba

---

为显示该属性添加相对CSS属性：relative; - EnterJQ

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

"

- bfavaretto

---

第二行可以是 $('#icon-selection-menu').css(destination);，对吗？或者是 $('#icon-selection-menu').offset(destination);。 - Bob Stein

@BobStein-VisiBone 是的！ - bfavaretto

Answer 2

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

示例：

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

- Prasath K

---

谢谢你，Prasath！我投了赞成票，但是将另一篇帖子标记为解决方案，因为它更详细。 - zuba

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的人有所帮助！

- Cannicide

---

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop - Cannicide

offsetLeft - Cannicide

conselect.style.top = oTop+"px"; conselect.style.left = oLeft+"px";否则它不起作用，只应用绝对属性。 - Иво Недев

添加像素或不添加仍然有效。建议您在更精确的示例中使用px，但在此示例中不需要它才能正常工作。 - Cannicide

Answer 4

获取 '.emoticon-button' 的位置（left，top）。然后将其应用于 '#icon-selection-menu'。需要对顶部和左侧进行一些调整以与表情符号对齐。

- r1webs

---

position()返回父级框内的上部和左部，但很抱歉对我没用。感谢您的建议。 - zuba

Answer 5

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

- Vignesh Subramanian

---

position() 返回父级框内的顶部和左侧位置，很抱歉对我无效。感谢您的建议。 - zuba