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

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

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

tl; доктор: (пробуют его здесь )

, Если у Вас есть следующий 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 (как упомянуто в ответ ниже), который обрабатывает каждую мыслимую возможность. Обратите внимание, что Вы будете иметь к show() элемент меню прежде, чем звонить position({...}); плагин не может расположить скрытые элементы.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

}