การจัดตำแหน่งแบบคงที่และสัมพัทธ์

พร็อพเพอร์ตี position ควบคุมวิธีจัดวางองค์ประกอบในลำดับการจัดวางของเอกสาร ค่าทั้งห้าคือ static, relative, absolute, fixed และ sticky

องค์ประกอบทุกตัวมีค่าเริ่มต้นเป็น position: static องค์ประกอบแบบ static จะทำตามลำดับการจัดวางปกติของเอกสาร — องค์ประกอบแบบบล็อกจะเรียงซ้อนในแนวตั้ง ส่วนองค์ประกอบอินไลน์จะไหลจากซ้ายไปขวา คุณสมบัติค่าออฟเซ็ต (บน ขวา ล่าง ซ้าย) จะไม่มีผล

position: relative จะคงองค์ประกอบไว้ในลำดับการจัดวางปกติ แต่ให้คุณเลื่อนองค์ประกอบได้โดยอ้างอิงจากตำแหน่งปกติขององค์ประกอบเองด้วย top, right, bottom, left

เมื่อใช้ position: relative ร่วมกับค่าออฟเซ็ต องค์ประกอบจะเคลื่อนที่ในเชิงภาพ แต่พื้นที่เดิมในการจัดวางยังคงถูกกันไว้ องค์ประกอบอื่นจะไม่เข้ามาเติมช่องว่างนั้น

คุณสมบัติค่าออฟเซ็ตจะเลื่อนองค์ประกอบจากจุดอ้างอิง:

• top: เลื่อนลงจากขอบด้านบน
• left: เลื่อนไปทางขวาจากขอบด้านซ้าย
• ค่าลบจะกลับทิศทาง

z-index ทำงานได้เฉพาะกับองค์ประกอบที่กำหนดตำแหน่งเท่านั้น (ไม่ใช่ static) หากต้องการควบคุมลำดับชั้น ให้กำหนดอย่างน้อย position: relative

การใช้งาน position: relative ที่สำคัญที่สุดคือการทำให้องค์ประกอบเป็นบล็อกอ้างอิงสำหรับองค์ประกอบลูกที่กำหนดตำแหน่งแบบสัมบูรณ์ แม้จะไม่ได้กำหนดค่าออฟเซ็ตใด ๆ ก็ตาม

การใช้ position: relative ร่วมกับ transform จะสร้างบริบทการซ้อนเลเยอร์ใหม่ องค์ประกอบยังคงอยู่ในลำดับการจัดวาง แต่สามารถเปลี่ยนรูปในเชิงภาพได้

หลีกเลี่ยงการกำหนด position: relative ให้กับทุกองค์ประกอบ เพราะจะสร้างบริบทการซ้อนเลเยอร์ซึ่งอาจทำให้การจัดการ z-index ซับซ้อนขึ้น ใช้เมื่อจำเป็นต้องกำหนดค่าออฟเซ็ตหรือใช้เป็นจุดยึดให้องค์ประกอบลูกที่กำหนดตำแหน่งแบบสัมบูรณ์เท่านั้น

เนื่องจากการกำหนดตำแหน่งแบบ relative ไม่ส่งผลต่อลำดับการจัดวาง คุณจึงสามารถทำให้ top/left เคลื่อนไหวเพื่อสร้างเอฟเฟกต์ในเชิงภาพได้อย่างปลอดภัย อย่างไรก็ตาม การทำให้ transform: translate() เคลื่อนไหวจะมีประสิทธิภาพมากกว่า

ใน DevTools ให้ดูที่แผงค่าที่คำนวณแล้วเพื่อดูค่า position ที่มีผลจริง แผนภาพโมเดลกล่องจะแสดงพิกัดค่าออฟเซ็ตที่ใช้จริงอย่างละเอียด

พื้นที่ในการจัดวางขององค์ประกอบจะเป็นอย่างไรเมื่อคุณใช้ position: relative; top: 20px

position: static เป็นค่าเริ่มต้น — ไม่มีค่าออฟเซ็ตและไม่มีการซ้อนเลเยอร์ position: relative อนุญาตให้กำหนดค่าออฟเซ็ตจากตำแหน่งขององค์ประกอบเอง และยังคงพื้นที่ในการจัดวางไว้ บทบาทที่สำคัญที่สุดคือการทำหน้าที่เป็นบล็อกอ้างอิงสำหรับองค์ประกอบลูกที่กำหนดตำแหน่งแบบสัมบูรณ์