JQuery'de, konum değerleri belgeye değil üst öğeye göre olan öğenin "üst, sol" özelliklerini nasıl ayarlayabilirim?

.offset([coordinates])yöntemi, öğenin koordinatlarını ayarlar, ancak yalnızca belgeye göre olur. Öyleyse bir öğenin koordinatlarını üst öğeye göre nasıl ayarlayabilirim?

.position()Yöntemin üst öğeye göre yalnızca "üst, sol" değerleri aldığını, ancak herhangi bir değer belirlemediğini gördüm .

İle denedim

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

ama çalışmıyor.

position:relativeÜst position:absoluteöğeye göre konumu ayarlamak için üst öğenin ve öğenin

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

Bunun nedeni, position: absolute;konumların en yakın konumlandırılmış üst öğeye (yani, varsayılan dışında herhangi bir position özelliğine sahip en yakın üst öğe static) göre olmasıdır.

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

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

JQuery UI'nin .position yöntemini deneyebilirsiniz .

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

Çalışan demoyu kontrol edin.

Ben değer bir dize türü ise, 'px' (yani 90px) tarafından takip edilmesi gerektiğini buldum, burada değer bir tamsayı ise, otomatik olarak px ekleyecektir. width ve height özellikleri daha affedicidir (her iki tür eser de).

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

Dinamik sayfa için kod ofseti dinamiği

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

Ayar konumuyla hafızamı tazeliyorum, bu kadar geç geliyorum, başkasının görüp görmeyeceğini bilmiyorum, ama -

Konum ayarlamaktan hoşlanmıyorum css(), ancak çoğu zaman iyi. Ben en iyi bahis position()xdazz tarafından belirtildiği gibi jQuery UI ayarlayıcı kullanmak olduğunu düşünüyorum . Ancak, jQuery kullanıcı arabirimi, bir nedenden ötürü bir seçenek değilse (henüz jQuery ise), bunu tercih ederim:

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

Bunun avantajı, $divebeveyninin keyfi olarak göreli konumlandırmaya ayarlanmamasıdır (eğer $divebeveyninin kendisi başka bir şeyin içine mutlak konumlandırılmışsa?) Ben keşke büyük kenarı durumda olduğunu düşünüyorum $divherhangi yoktur offsetParent, değil emin dönecekti eğer document, nullya tamamen başka bir şey.

offsetParent 2008'de bazen jQuery 1.2.6'dan beri mevcuttur, bu nedenle bu teknik şimdi ve orijinal soru sorulduğunda çalışır.

offset()İşlevini kullan jQuery. İşte olurdu:

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