jQuery: Perbedaan antara posisi () dan offset ()

178

Apa perbedaan antara position()dan offset()? Saya mencoba melakukan hal berikut dalam acara klik:

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

Dan mereka tampaknya mengembalikan persis sama ... (Elemen yang diklik adalah dalam sel tabel dalam tabel)

jquery positioning

— Svish
sumber

215

Apakah mereka sama tergantung pada konteksnya.

positionmengembalikan {left: x, top: y}objek relatif ke induk offset
offsetmengembalikan {left: x, top: y}objek relatif ke dokumen .

Jelas, jika dokumen tersebut adalah induk offset, yang sering terjadi, ini akan identik. The orangtua mengimbangi adalah "unsur yang mengandung diposisikan terdekat."

Misalnya, dengan dokumen ini:

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

Maka itu $('#sub').offset() akan terjadi {left: 200, top: 200}, tetapi itu .position()akan terjadi {left: 0, top: 0}.

— David Hedlund
sumber

2

Jadi orangtua offset adalah orangtua pertama dengan posisi disetel ke absolut? atau?

— Svish

1

@Vish: whoa, apakah saya benar-benar kehilangan indentasi kode? terima kasih untuk edit. ya, orangtua offset adalah orangtua yang diposisikan terdekat . yaitu elemen dengan posisi disetel ke absolut, relatif atau tetap (tetapi tidak statis). ini bukan jQuery atau bahkan hal javascript, Anda memiliki perilaku yang sama dalam css: jika Anda memberikan subposisi absolut ke 0: 0, maka itu akan berada di sudut kiri atas dari induk offset.

— David Hedlund

1

FYI, .positiondiperbarui pada 1.12.0 => github.com/jquery/jquery/issues/1708

— retrovertigo

Tidak bertentangan dengan sudut pandang naluriah? Ini sangat sewenang-wenang! Bagi saya "titik" absolut adalah sebuah posisi. "Titik" relatif adalah offset.

— Sandburg

28

Metode .offset () memungkinkan kita untuk mengambil posisi elemen saat ini relatif terhadap dokumen . Bandingkan ini dengan .position () , yang mengambil posisi saat ini relatif terhadap induk offset . Saat memposisikan elemen baru di atas yang sudah ada untuk manipulasi global (khususnya, untuk menerapkan drag-and-drop), .offset () adalah yang lebih berguna.

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

— jandy
sumber

3

Seperti yang ditanyakan di atas, apa yang dianggap sebagai offset induk? Tampaknya posisi panggilan () pada div pertama di dalam div lain tidak selalu mengembalikan 0,0 - bahkan ketika tidak ada gaya atau posisi lainnya yang terjadi.

— Kokodoko

2

jquery.offsetParent (): api.jquery.com/offsetparent "Dapatkan elemen leluhur terdekat yang diposisikan."

— Curtis Yallop

-6

Kedua fungsi mengembalikan objek polos dengan dua properti: lebar & tinggi.

offset () mengacu pada posisi relatif terhadap dokumen.

position () mengacu pada posisi relatif terhadap elemen induknya

TETAPI ketika posisi css objek "absolut" kedua fungsi akan mengembalikan lebar = 0 & tinggi = 0

— dwoutsourcing
sumber

6

Koreksi: offset dan posisi mengembalikan objek dengan properti kiri dan atas, bukan lebar dan tinggi.

— Jorge Olivares