How to position a div at the top of another div

Question

The first div is the '#icon-selection-menu' bar, it's idle position is absolute with top:0px and left:0px. So it appears at he top left corner inside the content 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.

How can I get top and left values to set $('#icon-selection-menu').top and $('#icon-selection-menu').left ?

add relative css property for that display : relative ; – EnterJQ Feb 27 '13 at 05:00 — EnterJQ, Feb 27 '13 at 05:00

score 26 · Accepted Answer · answered Feb 27 '13 at 05:18

26

jQuery¹ provides .offset() to get the position of any element relative to the document. Since #icon-selection-menu is already positioned relative to the document, you can use this:

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').

_{(1) jQuery assumed due to the use of $ in the question.}

answered Feb 27 '13 at 05:18

bfavaretto

71,580
16
111
150

4

2nd line could be `$('#icon-selection-menu').css(destination);` couldn't it? Or `$('#icon-selection-menu').offset(destination);` – Bob Stein Mar 25 '16 at 00:20
@BobStein-VisiBone Yes! – bfavaretto Mar 25 '16 at 13:50

Prasath K · Answer 2 · 2013-04-03T06:07:03.653

6

You can get the top and left position of a div using offsetTop and offsetLeft

Example:`

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

edited Apr 03 '13 at 06:07

answered Feb 27 '13 at 05:38

Prasath K

4,950
7
23
35

Thank you, Prasath! I voted up, but marked as the solution the other post as it is more detailed. – zuba Feb 27 '13 at 06:12

score 4 · Answer 3 · answered Jan 19 '17 at 22:45

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.

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 iconselect is what I am trying to align, and the element emoticonbtn is the button you press to make iconselect appear. The most important parts of the code summarized:

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!

[https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop) — Cannicide, Jan 19 '17 at 22:48
[offsetLeft](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetLeft) — Cannicide, Jan 19 '17 at 22:49
conselect.style.top = oTop+"px"; iconselect.style.left = oLeft+"px"; Otherwise it doesn't work and only applies the absolute property. — Иво Недев, Oct 06 '17 at 07:40
adding pixels or not still works. It is recommended that you do use px for more precise examples, but in this example is not necessary for it to work — Cannicide, Oct 15 '17 at 19:48

Vignesh Subramanian · Answer 4 · 2013-12-27T09:29:25.007

0

you can get the position of the element by using the below 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});
});

edited Dec 27 '13 at 09:29

answered Feb 27 '13 at 05:07

Vignesh Subramanian

7,161
14
87
150

position() returns top and left inside the parent box, sorry that doesn't work to me. Thank you for your advice. – zuba Feb 27 '13 at 06:08

score 0 · Answer 5 · answered Feb 27 '13 at 05:08

0

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.

answered Feb 27 '13 at 05:08

r1webs

353
1
3
9

position() returns top and left inside the parent box, sorry that doesn't work to me. Thank you for your advice. – zuba Feb 27 '13 at 06:13

How to position a div at the top of another div

5 Answers5

Linked