jQuery 如何使用javascript将一个div定位在另一个div的顶部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15104538/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to position a div at the top of another div with javascript?
提问by zuba
The first div is the '#icon-selection-menu'bar, it's idle position is absolutewith top:0pxand left:0px. So it appears at he top left corner inside the content div.
第一个 div 是'#icon-selection-menu'栏，它的空闲位置是绝对的top:0px和left:0px。所以它出现在内容div的左上角。
Deep in the content div children I got other divs which are actually kind of '.emoticon-button'. Their position is relative inside their parent. On such button click I'd like to position the first div just above the button, adjusting it's bottom border to the button's top border.
在内容 div 孩子的深处，我得到了其他 div，它们实际上是一种“.emoticon-button”。它们的位置在其父级内部是相对的。在这样的按钮点击上，我想将第一个 div 定位在按钮上方，将它的底部边框调整为按钮的顶部边框。
How can I get topand leftvalues to set $('#icon-selection-menu').topand $('#icon-selection-menu').left?
我怎样才能得到顶部和左侧的值来设置$('#icon-selection-menu').top和$('#icon-selection-menu').left？
回答by bfavaretto
jQuery1provides .offset()to get the position of any element relative to the document. Since #icon-selection-menuis already positioned relative to the document, you can use this:
jQuery 1提供.offset()了获取任何元素相对于文档的位置。由于#icon-selection-menu已经相对于文档定位，您可以使用它：
var destination = $('.emoticon-button').offset();
$('#icon-selection-menu').css({top: destination.top, left: destination.left});
$('#icon-selection-menu')will be placed at the top-left corner of $('.emoticon-button').
$('#icon-selection-menu')将放置在 的左上角$('.emoticon-button')。
(1) jQuery assumed due to the use of $in the question.
(1) jQuery 由于$在问题中的使用而假设。
回答by Prasath K
You can get the top and left position of a div using offsetTop and offsetLeft
您可以使用 offsetTop 和 offsetLeft 获取 div 的顶部和左侧位置
Example:`
示例：`
$('#div-id').offset().top;
$('#div-id').offset().left;
回答by Cannicide
Javascript has a built-in version of what @bfavaretto mentioned. It is a bit longer than the Jquery version, but people like me who don't use Jquery might need it.
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";
You can, of course, add units to this system such as px or other things. Just note that what I did above was just an example and is for two seperate elements with IDs, not classes. The first two lines of the code will vary according to your code. The element iconselectis what I am trying to align, and the element emoticonbtnis the button you press to make iconselectappear. The most important parts of the code summarized:
当然，您可以向该系统添加单位，例如 px 或其他东西。请注意，我上面所做的只是一个例子，并且是针对两个带有 ID 的单独元素，而不是类。代码的前两行将根据您的代码而有所不同。元素iconselect是我要对齐的元素，元素emoticonbtn是您按下以使其iconselect出现的按钮。代码中最重要的部分总结如下：
elementtomove.offsetTop; //distance from top of screen
elementtomove.offsetLeft; //distance from left of screen
Hope this helps the people who are unwilling to use JQUERY!
希望这对不愿意使用JQUERY的人有所帮助！
回答by Vignesh Subramanian
you can get the position of the element by using the below jquery
您可以使用以下 jquery 获取元素的位置
var position=$('#icon-selection-menu').position();
var left=position.left;
var right=position.right
and on click of that button you can position it above by using
单击该按钮后，您可以使用
$("#ID").live("click",function(){
$('.emoticon-button').animate({left:left,right:right});
});
回答by r1webs
Get '.emoticon-button' position(left,top). Then apply the same to '#icon-selection-menu'. There would some adjustment on top and left to align with emoticon.
获取“.emoticon-button”位置（左，上）。然后将相同的内容应用于“#icon-selection-menu”。顶部和左侧会有一些调整以与表情符号对齐。
