คุณสมบัติ CSS Position
คุณสมบัติ position ใน CSS เป็นตัวกำหนดว่า element จะวางอยู่ตรงไหนบนหน้าเว็บของคุณ โดยคุณสามารถใช้ top, right, bottom และ left เพื่อเคลื่อนย้ายตำแหน่งของพวกมันได้
การกำหนดตำแหน่งมี 5 ประเภทหลัก
Static นี่คือค่าเริ่มต้น (default) โดย element จะเรียงลำดับตามปกติของหน้าเว็บ การใช้คุณสมบัติ top หรือ left จะไม่มีผลใดๆ ในโหมดนี้
Relative เป็นการเคลื่อนย้าย element โดยอ้างอิงจากตำแหน่งเดิมของมัน หากคุณเพิ่มค่า top เป็น 20px element จะเลื่อนลงด้านล่าง ส่วน element อื่นๆ จะยังคงอยู่ที่ตำแหน่งเดิมและไม่เข้ามาแทนที่ช่องว่างที่เกิดขึ้น
Absolute เป็นการนำ element ออกจากลำดับการไหลปกติของหน้าเว็บ (normal page flow) โดยมันจะจัดตำแหน่งตัวเองโดยอ้างอิงจากบรรพบุรุษ (ancestor) ที่มีการกำหนดตำแหน่ง (positioned ancestor) ที่ใกล้ที่สุด
ประเภทอื่นๆ ได้แก่ Fixed และ Sticky โดย element แบบ Fixed จะอยู่ที่เดิมเสมอแม้ว่าคุณจะเลื่อนหน้าจอ (scroll) ส่วนแบบ Sticky จะทำงานเหมือนกับ relative จนกระทั่งถึงจุดที่กำหนด จากนั้นจึงจะค้างอยู่กับที่ (fixed)
เรียนรู้เพิ่มเติมเกี่ยวกับคุณสมบัติเหล่านี้ได้ที่นี่
ที่มา: https://dev.to/kavin_loyola_660466e5ea96/css-position-properties-23o8