Как разместить один элемент относительно другого с помощью jQuery?

Теперь вы можете использовать:

 $("#my_div").position({ my: "left top", at: "left bottom", of: this, // or $("#otherdiv") collision: "fit" }); 

Для быстрого позиционирования ( jQuery UI / Position ).

ПРИМЕЧАНИЕ. Для этого требуется jQuery UI (а не только jQuery).

Вы можете скачать jQuery UI здесь .

tl; dr: (попробуйте здесь )

Если у вас есть следующий HTML:

 
  
Menu item
 
 
Hover over me to show the menu here 

то вы можете использовать следующий код JavaScript:

 $(".parent").mouseover(function() { // .position() uses position relative to the offset parent, var pos = $(this).position(); // .outerWidth() takes into account border and padding. var width = $(this).outerWidth(); //show the menu directly over the placeholder $("#menu").css({ position: "absolute", top: pos.top + "px", left: (pos.left + width) + "px" }).show(); }); 

Но это не сработает!

Это будет работать до тех пор, пока меню и местозаполнитель имеют одинаковый родитель-корреспондент. Если они этого не делают, и у вас нет вложенных правил CSS, которые заботятся о том, где в DOM #menu элемент #menu , используйте:

 $(this).append($("#menu")); 

непосредственно перед строкой, которая позиционирует элемент #menu .

Но это все еще не работает!

У вас может быть какой-то странный макет, который не работает с этим подходом. В этом случае просто используйте плагин позиции jQuery.ui (как указано в ответе ниже), который обрабатывает все возможные возможности. Обратите внимание, что вам нужно будет show() элемент меню до вызова position({...}) ; плагин не может размещать скрытые элементы.

Обновление примечаний 3 года спустя в 2012 году:

(Оригинальное решение архивировано здесь для потомков)

Итак, оказывается, что оригинальный метод, который у меня был здесь, был далек от идеала. В частности, он потерпит неудачу, если:

• родитель смещения меню не является родителем смещения заполнителя
• Заполнитель имеет границу / дополнение

К счастью, jQuery ввел методы ( position() и outerWidth() ) в 1.2.6, что значительно облегчает поиск правильных значений в последнем случае. В первом случае append элемента меню в местозаполнитель работает (но будет нарушать правила CSS на основе вложенности).

Это то, что сработало для меня в конце.

 var showMenu = function(el, menu) { //get the position of the placeholder element var pos = $(el).offset(); var eWidth = $(el).outerWidth(); var mWidth = $(menu).outerWidth(); var left = (pos.left + eWidth - mWidth) + "px"; var top = 3+pos.top + "px"; //show the menu directly over the placeholder $(menu).css( { position: 'absolute', zIndex: 5000, left: left, top: top } ); $(menu).hide().fadeIn(); }; 

Вот функция jQuery, которую я написал, которая помогает мне позиционировать элементы.

Вот пример использования:

 $(document).ready(function() { $('#el1').position('#el2', { anchor: ['br', 'tr'], offset: [-5, 5] }); }); 

Вышеприведенный код выравнивает нижнее правое от # el1 с правым верхним краем # el2. [‘cc’, ‘cc’] будет центрировать # el1 в # el2. Убедитесь, что # el1 имеет значение css: absolute и z-index: 10000 (или некоторое действительно большое количество), чтобы сохранить его сверху.

Параметр offset позволяет вам подталкивать координаты на указанное количество пикселей.

Исходный код приведен ниже:

 jQuery.fn.getBox = function() { return { left: $(this).offset().left, top: $(this).offset().top, width: $(this).outerWidth(), height: $(this).outerHeight() }; } jQuery.fn.position = function(target, options) { var anchorOffsets = {t: 0, l: 0, c: 0.5, b: 1, r: 1}; var defaults = { anchor: ['tl', 'tl'], animate: false, offset: [0, 0] }; options = $.extend(defaults, options); var targetBox = $(target).getBox(); var sourceBox = $(this).getBox(); //origin is at the top-left of the target element var left = targetBox.left; var top = targetBox.top; //alignment with respect to source top -= anchorOffsets[options.anchor[0].charAt(0)] * sourceBox.height; left -= anchorOffsets[options.anchor[0].charAt(1)] * sourceBox.width; //alignment with respect to target top += anchorOffsets[options.anchor[1].charAt(0)] * targetBox.height; left += anchorOffsets[options.anchor[1].charAt(1)] * targetBox.width; //add offset to final coordinates left += options.offset[0]; top += options.offset[1]; $(this).css({ left: left + 'px', top: top + 'px' }); } 

Почему слишком сложно усложнять? Решение очень просто

CSS:

 .active-div{ position:relative; } .menu-div{ position:absolute; top:0; right:0; display:none; } 

JQuery:

 $(function(){ $(".active-div").hover(function(){ $(".menu-div").prependTo(".active-div").show(); },function(){$(".menu-div").hide(); }) 

Он работает, даже если,

• Два divs помещены где-нибудь еще
• Изменение размера браузера

Вы можете использовать плагин jQuery PositionCalculator

Этот плагин также включает обработку столкновений (flip), поэтому меню в виде панели инструментов можно поместить в видимое положение.

 $(".placeholder").on('mouseover', function() { var $menu = $("#menu").show();// result for hidden element would be incorrect var pos = $.PositionCalculator( { target: this, targetAt: "top right", item: $menu, itemAt: "top left", flip: "both" }).calculate(); $menu.css({ top: parseInt($menu.css('top')) + pos.moveBy.y + "px", left: parseInt($menu.css('left')) + pos.moveBy.x + "px" }); }); 

для этой разметки:

 
 
Menu item
 
Menu item
 
Menu item
 
 
placeholder 1
 
placeholder 2 

Вот скрипка: http://jsfiddle.net/QrrpB/1657/

Что-то вроде этого?

 $(menu).css("top", targetE1.y + "px"); $(menu).css("left", targetE1.x - widthOfMenu + "px"); 

Это работает для меня:

 var posPersonTooltip = function(event) { var tPosX = event.pageX - 5; var tPosY = event.pageY + 10; $('#personTooltipContainer').css({top: tPosY, left: tPosX});