Di jQuery bagaimana saya bisa mengatur properti "atas, kiri" elemen dengan nilai posisi relatif terhadap induknya dan bukan pada dokumen?

.offset([coordinates])Metode mengatur koordinat elemen tetapi hanya relatif terhadap dokumen. Lalu bagaimana saya bisa mengatur koordinat elemen tetapi relatif terhadap induknya?

Saya menemukan bahwa .position()metode hanya mendapatkan nilai "atas, kiri" relatif terhadap induknya, tetapi tidak menetapkan nilai apa pun.

Saya mencoba

$("#mydiv").css({top: 200, left: 200});

tetapi tidak berhasil.

Untuk mengatur posisi relatif terhadap induk, Anda perlu mengatur position:relativeinduk dan position:absoluteelemen

$("#mydiv").parent().css({position: 'relative'});
$("#mydiv").css({top: 200, left: 200, position:'absolute'});

Ini berfungsi karena position: absolute;posisi relatif terhadap induk yang diposisikan terdekat (yaitu, induk terdekat dengan properti posisi apa pun selain default static).

$("#mydiv").css('top', 200);

$("#mydiv").css('left', 200);

Anda dapat mencoba metode .posisi jQuery UI .

$("#mydiv").position({
  of: $('#mydiv').parent(),
  my: 'left+200 top+200',
  at: 'left top'
});

Periksa demo yang berfungsi.

Saya menemukan bahwa jika nilai yang dikirimkan adalah tipe string, itu harus diikuti oleh 'px' (yaitu 90px), di mana jika nilainya bilangan bulat, itu akan menambahkan px secara otomatis. properti lebar dan tinggi lebih mudah memaafkan (baik tipe bekerja).

var x = "90";
var y = "120"
$(selector).css( { left: x, top: y } )        //doesn't work
$(selector).css( { left: x + "px", top: y + "px" } )        //does work

x = 90;
y = 120;
$(selector).css( { left: x, top: y } )        //does work

Kode offset dinamis untuk halaman dinamis

var pos=$('#send').offset().top;
$('#loading').offset({ top : pos-220});

Menyegarkan ingatan saya pada pengaturan posisi, saya datang ke ini sangat terlambat saya tidak tahu apakah ada orang lain yang akan melihatnya, tapi -

Saya tidak suka mengatur posisi menggunakan css(), meskipun sering baik-baik saja. Saya pikir yang terbaik adalah menggunakan position()setter jQuery UI seperti dicatat oleh xdazz. Namun jika jQuery UI, karena alasan tertentu, bukan pilihan (belum jQuery), saya lebih suka ini:

const leftOffset = 200;
const topOffset = 200;
let $div = $("#mydiv");
let baseOffset = $div.offsetParent().offset();
$div.offset({
  left: baseOffset.left + leftOffset,
  top: baseOffset.top + topOffset
});

Ini memiliki keuntungan dari tidak menetapkan $divorangtua secara sewenang-wenang ke posisi relatif (bagaimana jika $divorangtua itu sendiri, benar-benar diposisikan di dalam sesuatu yang lain?). Saya pikir satu-satunya kasus tepi utama adalah jika $divtidak memiliki offsetParent, tidak yakin apakah itu akan kembali document, nullatau sesuatu yang lain sama sekali.

offsetParent telah tersedia sejak jQuery 1.2.6, sekitar tahun 2008, jadi teknik ini berfungsi sekarang dan ketika pertanyaan awal diajukan.

Gunakan offset()fungsi jQuery. Ini dia akan:

$container.offset({
        'left': 100,
        'top': mouse.y - ( event_state.mouse_y - event_state.container_top ) 
    });