Question

107

How to position a div at the top of another div

rated 0 times [ 108] [ 1] / answers: 1 / hits: 29275 / 11 Years ago, wed, february 27, 2013, 12:00:00

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 ?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

keric

Add To Favorites

Follow

Total Points: 572

Total Questions: 93

Total Answers: 97

Location: Cyprus

Member since Mon, Oct 24, 2022

2 Years ago

keric questions

1 Event.target.dataset returning undefined javascript

Thu, Dec 2, 21, 00:00, 3 Years ago

1 How to make a horizontal line without using < hr> tag?

Mon, Jul 19, 21, 00:00, 3 Years ago

1 Input with type=number that allows only numbers to be typed

Thu, Jul 15, 21, 00:00, 3 Years ago

1 Does declaring a React.memo inside another functional component provide the memoization performance as it is intended?

Sat, Jan 30, 21, 00:00, 3 Years ago

1 ReactJS useEffect() is running every time on page load

Thu, Nov 5, 20, 00:00, 4 Years ago

View All

answered 11 Years ago stacyl · Accepted Answer

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