¿Cómo posicionar un elemento en relación con otro con jQuery?

Tengo un DIV oculto que contiene un menú similar a una barra de herramientas.

Tengo varios DIV que están habilitados para mostrar el menú DIV cuando el mouse se desplaza sobre ellos.

¿Existe una función incorporada que moverá el menú DIV a la parte superior derecha del DIV activo (desplazamiento del mouse)? Estoy buscando algo como$(menu).position("topright", targetEl);

NOTA: Esto requiere jQuery UI (no solo jQuery).

Ahora puedes usar:

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

Para posicionamiento rápido ( jQuery UI / Position ).

Puede descargar jQuery UI aquí .

tl; dr: (pruébalo aquí )

Si tiene el siguiente 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>

entonces puede usar el siguiente código 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();
});

¡Pero no funciona!

Esto funcionará siempre que el menú y el marcador de posición tengan el mismo desplazamiento principal. Si no lo hacen, y no tiene reglas CSS anidadas que se preocupan por el #menuelemento DOM , use:

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

justo antes de la línea que posiciona el #menuelemento.

¡Pero todavía no funciona!

Es posible que tenga un diseño extraño que no funciona con este enfoque. En ese caso, solo use el complemento de posición de jQuery.ui (como se menciona en una respuesta a continuación), que maneja cada eventualidad concebible. Tenga en cuenta que tendrá que ir show()al elemento del menú antes de llamar position({...}); El complemento no puede colocar elementos ocultos.

Notas de actualización 3 años después en 2012:

(La solución original se archiva aquí para la posteridad)

Entonces, resulta que el método original que tenía aquí estaba lejos de ser ideal. En particular, fallaría si:

• el padre desplazado del menú no es el padre desplazado del marcador de posición
• el marcador de posición tiene un borde / relleno

Afortunadamente, jQuery introdujo métodos ( position()y outerWidth()) en 1.2.6 que hacen que encontrar los valores correctos en este último caso sea mucho más fácil. Para el caso anterior, funciona appendel elemento de menú para el marcador de posición funciona (pero romperá las reglas CSS basadas en el anidamiento).

Esto es lo que funcionó para mí al final.

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

Aquí hay una función jQuery que escribí que me ayuda a posicionar elementos.

Aquí hay un ejemplo de uso:

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

El código anterior alinea la esquina inferior derecha de # el1 con la esquina superior derecha de # el2. ['cc', 'cc'] centraría # el1 en # el2. Asegúrese de que # el1 tenga el css de posición: absoluto e índice z: 10000 (o algún número realmente grande) para mantenerlo en la parte superior.

La opción de desplazamiento le permite empujar las coordenadas por un número específico de píxeles.

El código fuente está abajo:

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

}

¿Por qué complicarse demasiado? La solución es muy simple.

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

Funciona incluso si,

• Dos divs colocados en otro lugar
• Navegador redimensionado

Puede usar el plugin jQuery PositionCalculator

Ese complemento también ha incluido el manejo de colisiones (flip), por lo que el menú tipo barra de herramientas se puede colocar en una posición visible.

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

para ese marcado:

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

Aquí está el violín: http://jsfiddle.net/QrrpB/1657/

¿Algo como esto?

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

Esto funciona para mi:

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