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

的第一个div是'#icon-selection-menu'吧，它的闲置位置绝对与top:0px和left:0px。所以它出现在内容div的左上角。如何将javascript放在另一个div顶部的javascript？

内容深的孩子我有其他的div，其实是'.emoticon-button'。他们的位置是相对于他们的父母。在这样的按钮上单击我想将第一个div放在按钮上方，将其底部边框调整到按钮的顶部边框。

我怎样才能得到顶部和离开值来设置$('#icon-selection-menu').top和$('#icon-selection-menu').left？

2013-02-27 zuba

为该显示添加相对css属性：relative; – EnterJQ 2013-02-27 05:00:15

请给小提琴 – 2013-02-27 05:02:06

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

来源

2013-02-27 05:18:53 bfavaretto

第二行可能是'$（'＃icon-selection-menu'）.css（destination）;'不可以吗？或'$（'＃icon-selection-menu'）。offset（destination）;' – 2016-03-25 00:20:13

@ BobStein-VisiBone是的！ – bfavaretto 2016-03-25 13:50:01

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

来源

2013-02-27 05:07:34

position（）返回父框内的顶部和左边，对不起，这对我不起作用。感谢您的建议。 – zuba 2013-02-27 06:08:48

得到” .emoticon按钮上方的位置它'位置（左，顶部）。然后将其应用于'＃图标选择菜单'。在顶部和左侧将会进行一些调整以与表情符合。

来源

2013-02-27 05:08:39 r1webs

position（）返回顶部并留在父框中，对不起，这对我不起作用。感谢您的建议。 – zuba 2013-02-27 06:13:28

你可以使用的offsetTop和offsetLeft一个div的顶部和左侧位置

例子：`

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

来源

2013-02-27 05:38:25

谢谢，Prasath！我投了票，但标记为另一个职位的解决方案，因为它更详细。 – zuba 2013-02-27 06:12:20

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

来源

2017-01-19 22:45:09 IamGuest

[https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop ） – IamGuest 2017-01-19 22:48:37

[offsetLeft]（https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft） – IamGuest 2017-01-19 22:49:21

conselect.style.top = oTop +“px”; iconselect.style.left = oLeft +“px”; 否则它不起作用，只适用于绝对属性。 – 2017-10-06 07:40:22

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

回答

相关问题