jQuery: ความแตกต่างระหว่าง position () และ offset ()

178

ความแตกต่างระหว่างposition()และoffset()คืออะไร? ฉันพยายามทำสิ่งต่อไปนี้ในเหตุการณ์คลิก:

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

และดูเหมือนว่าพวกเขาจะกลับมาเหมือนเดิม ... (องค์ประกอบที่ถูกคลิกอยู่ภายในเซลล์ตารางในตาราง)

jquery positioning

— Svish
แหล่งที่มา

215

ไม่ว่าพวกเขาจะเหมือนกันหรือไม่ขึ้นอยู่กับบริบท

positionส่งคืน{left: x, top: y}วัตถุที่สัมพันธ์กับผู้ปกครองชดเชย
offsetส่งกลับ{left: x, top: y}วัตถุเทียบกับเอกสาร

เห็นได้ชัดว่าหากเอกสารเป็นออฟเซ็ตพาเรนต์ซึ่งมักจะเป็นกรณีเหล่านี้จะเหมือนกัน ปกครองชดเชยคือ "ตำแหน่งที่ใกล้เคียงที่สุดที่มีองค์ประกอบ."

ตัวอย่างเช่นกับเอกสารนี้:

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

จากนั้น$('#sub').offset() จะมี{left: 200, top: 200}แต่จะ.position(){left: 0, top: 0}

— เดวิดเฮดลันด์
แหล่งที่มา

2

ดังนั้นผู้ปกครองชดเชยเป็นผู้ปกครองคนแรกที่มีการตั้งค่าตำแหน่งที่แน่นอน? หรือ?

— Svish

1

@Svish: โอ้โหฉันคิดถึงรหัสเยื้องหรือไม่ thaks สำหรับการแก้ไข ใช่ผู้ปกครองชดเชยเป็นที่ใกล้เคียงในตำแหน่งผู้ปกครอง นั่นคือองค์ประกอบที่มีการตั้งค่าตำแหน่งเป็นสัมบูรณ์สัมพันธ์หรือคงที่ (แต่ไม่คงที่) นี่ไม่ใช่ jQuery หรือแม้กระทั่งสิ่ง javascript คุณมีพฤติกรรมเหมือนกันใน css: ถ้าคุณsubกำหนดตำแหน่งที่แน่นอนเป็น 0: 0 แล้วมันจะอยู่ที่มุมซ้ายบนของพาเรนต์ออฟเซ็ต

— David Hedlund

1

FYI .positionได้รับการอัปเดตใน 1.12.0 => github.com/jquery/jquery/issues/1708

— retrovertigo

ไม่ตรงข้ามกับมุมมองสัญชาตญาณ นี่เป็นสิ่งที่ไร้เหตุผล! สำหรับฉัน "จุด" แน่นอนคือตำแหน่ง "จุด" สัมพัทธ์คือการชดเชย

— Sandburg

28

.offset ()วิธีการช่วยให้เราสามารถดึงตำแหน่งปัจจุบันขององค์ประกอบที่สัมพันธ์กับเอกสาร คมชัดนี้กับ.position ()ซึ่งดึงตำแหน่งสัมพัทธ์ปัจจุบันไปยังผู้ปกครองชดเชย เมื่อวางตำแหน่งองค์ประกอบใหม่ที่ด้านบนขององค์ประกอบที่มีอยู่สำหรับการจัดการทั่วโลก (โดยเฉพาะอย่างยิ่งสำหรับการใช้การลากและวาง). offset () จะมีประโยชน์มากกว่า

ที่มา: http://api.jquery.com/offset/

— Jandy
แหล่งที่มา

3

ดังที่ได้กล่าวไว้ข้างต้นอะไรคือสิ่งที่ถือว่าเป็นผู้ปกครองชดเชย? ดูเหมือนว่าตำแหน่งการโทร () ใน div แรกภายใน div อื่นจะไม่ส่งคืนเสมอ 0,0 - แม้ว่าจะไม่มีการใส่สไตล์หรือการวางตำแหน่งอื่น ๆ

— Kokodoko

2

jquery.offsetParent (): api.jquery.com/offsetparent "รับองค์ประกอบบรรพบุรุษที่ใกล้ที่สุดซึ่งอยู่ในตำแหน่ง"

— Curtis Yallop

-6

ฟังก์ชั่นทั้งสองส่งคืนวัตถุธรรมดาที่มีคุณสมบัติสองประการคือความกว้างและความสูง

offset () หมายถึงตำแหน่งที่สัมพันธ์กับเอกสาร

position () หมายถึงตำแหน่งที่สัมพันธ์กับองค์ประกอบหลัก

แต่เมื่อตำแหน่ง css ของวัตถุเป็น "สัมบูรณ์" ทั้งสองฟังก์ชั่นจะคืนค่า width = 0 & height = 0

— dwoutsourcing
แหล่งที่มา

6

การแก้ไข: ชดเชยและตำแหน่งส่งคืนวัตถุที่มีคุณสมบัติด้านซ้ายและด้านบนไม่ใช่ความกว้างและความสูง

— Jorge Olivares