jQuery: Pozisyon () ve ofset () arasındaki fark

178

Arasındaki fark nedir position()ve offset()? Bir tıklama etkinliğinde aşağıdakileri yapmaya çalıştım:

console.info($(this).position(), $(this).offset());

Ve tamamen aynı gibi görünüyorlar ... (Tıklanan öğe bir tablodaki tablo hücresinin içindedir)

jquery positioning

— Svish
kaynak

215

Aynı olup olmadıkları bağlama bağlıdır.

positionofset üst{left: x, top: y} öğesine göre bir nesne döndürür
offsetbelgeye göre bir {left: x, top: y}nesne döndürür .

Açıkçası, belge ofset ebeveyni ise, ki bu genellikle durumdur, bunlar aynı olacaktır. Ofset üst "en yakın konumlandırılmış içeren eleman" dir.

Örneğin, bu belgeyle:

 <div style="position: absolute; top: 200; left: 200;">
     <div id="sub"></div>
 </div>

O zaman $('#sub').offset() olacak {left: 200, top: 200}, ama .position()olacak {left: 0, top: 0}.

— David Hedlund
kaynak

2

Ofset ebeveyn pozisyonu mutlak olarak ayarlanmış ilk ebeveyn mi? veya?

— Svish

1

@Svish: whoa, kod girintisini gerçekten özledim mi? düzenleme için thaks. evet, ofset üst konumlandırılan en yakın üst öğedir. yani, konumu mutlak, göreli veya sabit (ancak statik olmayan) olarak ayarlanmış bir eleman. Bu bir jQuery veya bir javascript şey değildir, css'de aynı davranışa sahip olursunuz: sub0: 0'a mutlak konumlandırma yapacaksanız, o zaman ofset ebeveyninin sol üst köşesinde olacaktır.

— David Hedlund

1

Bilginize, 1.12.0 sürümünde.position güncellendi => github.com/jquery/jquery/issues/1708

— retrovertigo

İçgüdüsel bakış açısının tersi değil mi? Bu çok keyfi! Benim için mutlak bir “nokta” bir konumdur. Göreli bir "nokta" bir ofsettir.

— Sandburg

28

.Offset () metodu bize bir eleman geçerli konumunu almak için izin verir belgeye akrabası . İle kontrast .position () alır, ofset ana akım konumunu . Global manipülasyon için (özellikle sürükle ve bırak uygulaması için) yeni bir elemanı mevcut bir elemanın üzerine yerleştirirken .offset () daha kullanışlıdır.

Kaynak: http://api.jquery.com/offset/

— JANDY
kaynak

3

Yukarıda istendiği gibi, ofset ebeveyn olarak kabul edilen nedir? Başka bir div içindeki ilk div üzerindeki position () çağrısı, başka bir stil veya konumlandırma olmasa bile her zaman 0,0 döndürmez.

— Kokodoko

2

jquery.offsetParent (): api.jquery.com/offsetparent " Konumlandırılmış en yakın ata öğesini alın."

— Curtis Yallop

-6

Her iki işlev de iki özelliğe sahip düz bir nesne döndürür: genişlik ve yükseklik.

ofset (), belgeye göre konumu belirtir.

position (), üst öğesine göre konumu ifade eder

AMA nesnenin css konumu "mutlak" olduğunda, her iki işlev de width = 0 & height = 0 döndürür

— dwoutsourcing
kaynak

6

Düzeltme: uzaklık ve konum, genişlik ve yükseklik değil, sol ve üst özelliklere sahip bir nesne döndürür.

— Jorge Olivares