如何将一个div放在另一个div的顶部

Question

第一个 div 是 '#icon-selection-menu' 栏，它的空闲位置是 绝对的 top:0px 和 left:0px 。所以它出现在内容分区内的左上角。

在内容 div 子项的深处，我得到了其他 div，它们实际上是一种“.emoticon-button”。他们的位置在父母内部是相对的。在单击此类按钮时，我想将第一个 div 定位在按钮上方，将其底部边框调整为按钮的顶部边框。

如何获得要设置的 顶部 和 左侧 值 $('#icon-selection-menu').top 和 $('#icon-selection-menu').left ？

原文由 zuba 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

jQuery 1提供 .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 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

例子：`

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

原文由 Prasath K 发布，翻译遵循 CC BY-SA 3.0 许可协议