Bagaimana cara memposisikan satu elemen relatif terhadap yang lain dengan jQuery?

Saya memiliki DIV tersembunyi yang berisi menu seperti toolbar.

Saya memiliki sejumlah DIV yang diaktifkan untuk menampilkan menu DIV ketika mouse berada di atasnya.

Apakah ada fungsi bawaan yang akan memindahkan menu DIV ke kanan atas DIV aktif (mouse hover)? Saya mencari sesuatu seperti$(menu).position("topright", targetEl);

CATATAN: Ini membutuhkan jQuery UI (bukan hanya jQuery).

Anda sekarang dapat menggunakan:

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

Untuk penentuan posisi cepat ( UI jQuery / Posisi ).

Anda dapat mengunduh jQuery UI di sini .

tl; dr: (coba di sini )

Jika Anda memiliki HTML berikut:

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

maka Anda dapat menggunakan kode JavaScript berikut:

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

Tapi itu tidak berhasil!

Ini akan berfungsi selama menu dan placeholder memiliki orangtua offset yang sama. Jika tidak, dan Anda tidak memiliki aturan CSS bersarang yang peduli dengan #menuelemen DOM , gunakan:

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

tepat sebelum garis yang memposisikan #menuelemen.

Tapi tetap saja tidak berhasil!

Anda mungkin memiliki beberapa tata letak aneh yang tidak berfungsi dengan pendekatan ini. Dalam hal ini, cukup gunakan plugin posisi jQuery.ui (sebagaimana disebutkan dalam jawaban di bawah), yang menangani setiap kemungkinan kejadian . Perhatikan bahwa Anda harus ke show()elemen menu sebelum memanggil position({...}); plugin tidak dapat memposisikan elemen tersembunyi.

Perbarui catatan 3 tahun kemudian pada tahun 2012:

(Solusi asli diarsipkan di sini untuk anak cucu)

Jadi, ternyata metode asli yang saya miliki di sini jauh dari ideal. Secara khusus, itu akan gagal jika:

• orang tua offset menu bukan orang tua pengganti placeholder
• placeholder memiliki perbatasan / padding

Untungnya, jQuery memperkenalkan metode ( position()dan outerWidth()) jalan kembali ke 1.2.6 yang membuat menemukan nilai yang tepat dalam kasus terakhir di sini jauh lebih mudah. Untuk kasus sebelumnya, appendmemasukkan elemen menu ke placeholder works (tetapi akan melanggar aturan CSS berdasarkan nesting).

Inilah yang pada akhirnya berhasil bagi saya.

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

Berikut adalah fungsi jQuery yang saya tulis yang membantu saya memposisikan elemen.

Berikut adalah contoh penggunaannya:

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

Kode di atas menyejajarkan kanan-bawah # el1 dengan kanan-atas # el2. ['cc', 'cc'] akan memusatkan # el1 di # el2. Pastikan # el1 memiliki css posisi: absolut dan indeks-z: 10000 (atau angka yang sangat besar) untuk tetap di atasnya.

Opsi offset memungkinkan Anda untuk mendorong koordinat dengan jumlah piksel tertentu.

Kode sumber di bawah ini:

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

}

Mengapa terlalu rumit? Solusinya sangat sederhana

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

Itu bekerja bahkan jika,

• Dua div ditempatkan di tempat lain
• Ukuran browser kembali

Anda dapat menggunakan plugin jQuery PositionCalculator

Plugin itu juga termasuk penanganan tabrakan (flip), sehingga menu seperti toolbar dapat ditempatkan pada posisi yang terlihat.

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

untuk markup itu:

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

Ini biola: http://jsfiddle.net/QrrpB/1657/

Sesuatu seperti ini?

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

Ini bekerja untuk saya:

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