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

Question

У меня есть скрытый DIV, который содержит меню в виде панели инструментов.

У меня есть ряд DIV, которые могут отображать меню DIV, когда мышь нависает над ними.

Есть ли встроенная функция, которая будет перемещать меню DIV в верхнем правом углу активного (наведение мыши) DIV? Я ищу что-то вроде $(menu).position("topright", targetEl);

Answer 1

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

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

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

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

Вы можете download jQuery UI here.

Answer 2

ТЛ; др: (попробуйте here)

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

<div id="menu" style="display: none;"> 
    <!-- menu stuff in here --> 
    <ul><li>Menu item</li></ul> 
</div> 

<div class="parent">Hover over me to show the menu here</div> 

, то вы можете использовать следующий код 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 элемент, используйте:

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

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

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

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

Update отмечает 3 года спустя в 2012 году:

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

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

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

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

Answer 3

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

Answer 4

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

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(); 
}; 

Answer 5

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

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

Answer 6

Вот функция 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' 
    }); 

} 

Answer 7

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

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(); 
}) 

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

• Две дивы размещены в другом месте
• Browser Re- размер

Answer 8

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

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

$(".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" 
    }); 
}); 

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

<ul class="popup" id="menu"> 
    <li>Menu item</li> 
    <li>Menu item</li> 
    <li>Menu item</li> 
</ul> 

<div class="placeholder">placeholder 1</div> 
<div class="placeholder">placeholder 2</div> 

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